/* ==========================================================================
   Nava — design tokens
   Light theme on :root, dark on :root[data-theme="dark"].
   Brand values are fixed by the contract; everything else is a scale.
   ========================================================================== */

:root {
  color-scheme: light;

  /* brand */
  --brand:#5B5BD6;
  --brand-hover:#4A4AC4;
  --brand-active:#3F3FB0;
  --brand-soft:#EEEEFF;
  --brand-softer:#F5F5FF;
  --brand-contrast:#FFFFFF;
  --brand-ring:rgba(91,91,214,.28);

  /* ink scale */
  --ink-0:#0B0C0E;
  --ink-1:#16181D;
  --ink-2:#1F2228;
  --ink-3:#2A2E37;
  --ink-4:#6B7280;
  --ink-5:#9CA3AF;
  --line:#E5E7EB;

  /* surfaces */
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-3:#F7F8FA;
  --surface-hover:#F2F3F7;
  --surface-active:#EAECF2;
  --surface-inverse:#16181D;

  /* text */
  --text:#0B0C0E;
  --text-2:#6B7280;
  --text-3:#9CA3AF;
  --text-inverse:#FFFFFF;

  /* borders */
  --border:#E5E7EB;
  --border-strong:#D1D5DB;
  --border-soft:#EFF0F4;
  --overlay:rgba(11,12,14,.42);

  /* semantics */
  --success:#12A150;
  --success-soft:#E8F7EE;
  --success-border:#B7E8CA;
  --warning:#D97706;
  --warning-soft:#FEF3E2;
  --warning-border:#F6D9A8;
  --danger:#DC2626;
  --danger-soft:#FDECEC;
  --danger-border:#F5C2C2;
  --info:#2563EB;
  --info-soft:#EAF1FE;
  --info-border:#C3D8FA;

  /* radii */
  --radius-sm:6px;
  --radius-input:8px;
  --radius-card:10px;
  --radius-modal:12px;
  --radius-lg:16px;
  --radius-pill:999px;

  /* elevation */
  --shadow-1:0 1px 2px rgba(16,24,40,.06);
  --shadow-2:0 8px 24px rgba(16,24,40,.10);
  --shadow-3:0 16px 48px rgba(16,24,40,.16);
  --shadow-pop:0 10px 30px rgba(16,24,40,.14), 0 1px 2px rgba(16,24,40,.08);

  /* type */
  --font-fa:"Vazirmatn","Vazir","Segoe UI",Tahoma,system-ui,sans-serif;
  --font-en:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-ui:var(--font-fa);
  --font-mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Segoe UI Mono",Menlo,monospace;
  --text-xs:11.5px;
  --text-sm:12.5px;
  --text-base:14px;
  --text-md:15px;
  --text-lg:18px;
  --text-xl:22px;
  --text-2xl:28px;
  --text-3xl:34px;
  --leading-tight:1.25;
  --leading-ui:1.6;
  --leading-prose:1.85;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* spacing */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;

  /* layout */
  --sidebar-w:264px;
  --sidebar-rail-w:68px;
  --topbar-h:56px;
  --drawer-w:520px;
  --content-max:1280px;

  /* motion */
  --motion-fast:150ms;
  --motion:180ms;
  --motion-slow:200ms;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* layers */
  --z-sidebar:30;
  --z-drawer:40;
  --z-modal:50;
  --z-toast:60;
  --z-popover:70;
  --z-palette:80;

  /* misc */
  --focus-ring:0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  --hairline:1px solid var(--border);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-soft:#23234A;
  --brand-softer:#1B1B38;
  --brand-contrast:#FFFFFF;
  --brand-ring:rgba(122,122,240,.34);

  --bg:#0B0C0E;
  --surface:#16181D;
  --surface-2:#1F2228;
  --surface-3:#2A2E37;
  --surface-hover:#1C1F26;
  --surface-active:#23272F;
  --surface-inverse:#F7F8FA;

  --text:#F7F8FA;
  --text-2:#9CA3AF;
  --text-3:#6B7280;
  --text-inverse:#0B0C0E;

  --border:#2A2E37;
  --border-strong:#3A3F4B;
  --border-soft:#20232A;
  --overlay:rgba(0,0,0,.62);

  --success-soft:#10291B;
  --success-border:#1C4A31;
  --warning-soft:#2A1D0C;
  --warning-border:#4A3413;
  --danger-soft:#2B1414;
  --danger-border:#4E2020;
  --info-soft:#101D33;
  --info-border:#1B3358;

  --shadow-1:0 1px 2px rgba(0,0,0,.30);
  --shadow-2:0 8px 24px rgba(0,0,0,.46);
  --shadow-3:0 18px 50px rgba(0,0,0,.55);
  --shadow-pop:0 12px 34px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
  --focus-ring:0 0 0 2px var(--surface), 0 0 0 4px #8B8BF0;
}

html[lang="en"] {
  --font-ui:var(--font-en);
}

/* Before core.js sets data-theme, honour the OS preference so the first paint
   is never the wrong theme. Once [data-theme] exists it always wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --brand-soft:#23234A;
    --brand-softer:#1B1B38;
    --bg:#0B0C0E;
    --surface:#16181D;
    --surface-2:#1F2228;
    --surface-3:#2A2E37;
    --surface-hover:#1C1F26;
    --surface-active:#23272F;
    --text:#F7F8FA;
    --text-2:#9CA3AF;
    --text-3:#6B7280;
    --border:#2A2E37;
    --border-strong:#3A3F4B;
    --border-soft:#20232A;
    --overlay:rgba(0,0,0,.62);
    --success-soft:#10291B;
    --success-border:#1C4A31;
    --warning-soft:#2A1D0C;
    --warning-border:#4A3413;
    --danger-soft:#2B1414;
    --danger-border:#4E2020;
    --info-soft:#101D33;
    --info-border:#1B3358;
    --shadow-1:0 1px 2px rgba(0,0,0,.30);
    --shadow-2:0 8px 24px rgba(0,0,0,.46);
    --shadow-3:0 18px 50px rgba(0,0,0,.55);
    --shadow-pop:0 12px 34px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
    --focus-ring:0 0 0 2px var(--surface), 0 0 0 4px #8B8BF0;
  }
}

/* Tabular numerals wherever numbers must line up. */
.num,
.table td.num,
.table th.num,
.amount,
.timestamp,
time {
  font-variant-numeric: tabular-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
}

/* Brand tint overrides used by workspace branding. app.js may set
   --brand / --brand-hover / --brand-soft on :root from the workspace. */