/* ==========================================================================
   Zakir OS — Design Tokens
   Single source of truth. No hardcoded colour or size anywhere else.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --blue-700:#1E3A8A;
  --blue-600:#1D4ED8;   /* GrowthGrain primary */
  --blue-500:#3B82F6;
  --blue-400:#60A5FA;
  --blue-050:#EFF4FF;

  /* --- Signal (state only, never decoration) ---------------------------- */
  --up:#12B76A;
  --warn:#F79009;
  --down:#F04438;
  --info:#3B82F6;

  /* --- Type ------------------------------------------------------------- */
  --font-ui:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono','Cascadia Mono',Menlo,monospace;

  --t-2xs:10px;
  --t-xs:11px;
  --t-sm:12px;
  --t-md:13px;   /* body default — dense operator UI */
  --t-base:14px;
  --t-lg:16px;
  --t-xl:20px;
  --t-2xl:26px;
  --t-3xl:34px;

  --lh-tight:1.2;
  --lh-body:1.55;
  --tracking-label:0.06em;

  /* --- Space (4px base) ------------------------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* --- Radius ----------------------------------------------------------- */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;

  /* --- Motion ----------------------------------------------------------- */
  --fast:120ms; --base:180ms; --slow:280ms;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* --- Frame ------------------------------------------------------------ */
  --sidebar-w:236px;
  --sidebar-w-collapsed:56px;
  --topbar-h:52px;
  --z-shell:10; --z-drawer:40; --z-modal:60; --z-palette:80; --z-toast:100;
}

/* --- Dark (default) ------------------------------------------------------ */
:root, [data-theme="dark"] {
  color-scheme: dark;

  --bg:#0A0B0D;
  --surface:#111317;
  --raised:#171A1F;
  --overlay:#1D2126;
  --hover:rgba(255,255,255,.045);
  --active:rgba(255,255,255,.075);

  --line:#23272E;
  --line-strong:#2E333B;

  --text:#F2F4F7;
  --text-2:#9BA3AF;
  --text-3:#636B76;

  --accent:var(--blue-500);
  --accent-hover:var(--blue-400);
  --accent-soft:rgba(59,130,246,.14);
  --accent-line:rgba(59,130,246,.35);
  --on-accent:#FFFFFF;

  --e1:0 1px 2px rgba(0,0,0,.4);
  --e2:0 4px 16px rgba(0,0,0,.45);
  --e3:0 16px 48px rgba(0,0,0,.55);

  --glass:rgba(23,26,31,.82);
}

/* --- Light --------------------------------------------------------------- */
[data-theme="light"] {
  color-scheme: light;

  --bg:#FFFFFF;
  --surface:#F7F8FA;
  --raised:#FFFFFF;
  --overlay:#FFFFFF;
  --hover:rgba(10,11,13,.04);
  --active:rgba(10,11,13,.07);

  --line:#E4E7EC;
  --line-strong:#D0D5DD;

  --text:#0A0B0D;
  --text-2:#5B636E;
  --text-3:#8A929D;

  --accent:var(--blue-600);
  --accent-hover:var(--blue-700);
  --accent-soft:rgba(29,78,216,.08);
  --accent-line:rgba(29,78,216,.28);
  --on-accent:#FFFFFF;

  --e1:0 1px 2px rgba(16,24,40,.06);
  --e2:0 4px 16px rgba(16,24,40,.08);
  --e3:0 16px 48px rgba(16,24,40,.12);

  --glass:rgba(255,255,255,.86);
}