/* عتید — ڈیزائن ٹوکنز: رنگ، فاصلہ، ٹائپ۔ لائٹ ڈیفالٹ؛ ڈارک نظام کی ترجیح یا دستی ٹوگل سے۔ */

:root {
  color-scheme: light dark;

  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #eef1f8;
  --border: #d9deea;
  --text: #1a2233;
  --text-muted: #546079;      /* ≥4.5:1 on --surface and --bg */
  --accent: #1f5fd6;
  --accent-text: #ffffff;
  --ok: #17794a;
  --ok-bg: #e3f5ec;
  --warn: #8a5a00;
  --warn-bg: #fff3d6;
  --danger: #b3261e;
  --danger-bg: #fde8e6;
  --focus: #1f5fd6;
  --on-strong: #ffffff;       /* متن جو گہرے ok/warn/danger رنگ پر بیٹھے */
  --shadow: 0 1px 2px rgb(20 30 60 / 8%), 0 4px 16px rgb(20 30 60 / 6%);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius: 12px;
  --radius-sm: 8px;
  --tap: 44px;                /* کم از کم ٹچ ہدف */

  /* نظام کے فونٹ: اردو، عربی اور دیگر زبانیں بغیر کسی اضافی ڈاؤن لوڈ کے */
  --font: "Segoe UI", Tahoma, "Noto Naskh Arabic", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-sm: 0.875rem;
  --fs: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --lh: 1.8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1424;
    --surface: #161d31;
    --surface-2: #1d2640;
    --border: #2b3656;
    --text: #e8edf7;
    --text-muted: #a3afc9;
    --accent: #6ea0ff;
    --accent-text: #0b1226;
    --ok: #5fd39a;
    --ok-bg: #12301f;
    --warn: #f2c15c;
    --warn-bg: #3a2c0c;
    --danger: #ff8f86;
    --danger-bg: #3d1714;
    --focus: #8db4ff;
    --on-strong: #0b1226;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 30%);
  }
}

:root[data-theme="dark"] {
  --bg: #0e1424;
  --surface: #161d31;
  --surface-2: #1d2640;
  --border: #2b3656;
  --text: #e8edf7;
  --text-muted: #a3afc9;
  --accent: #6ea0ff;
  --accent-text: #0b1226;
  --ok: #5fd39a;
  --ok-bg: #12301f;
  --warn: #f2c15c;
  --warn-bg: #3a2c0c;
  --danger: #ff8f86;
  --danger-bg: #3d1714;
  --focus: #8db4ff;
  --on-strong: #0b1226;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 30%);
}