/* KingArb · design tokens. Dark is the default (:root); html[data-theme=light] overrides only the colour ramp — sizes and rhythm are shared. */
:root{
  /* surfaces: near-black, neutral (no blue cast), one step per level */
  --bg-0:#08080a;   /* page */
  --bg-1:#0d0d10;   /* bars, panels */
  --bg-2:#121215;   /* hover rows, sub-heads */
  --bg-3:#18181c;   /* raised controls */
  --bg-4:#1f1f24;   /* pressed / monogram */
  /* hairlines */
  --line-0:#18181d;
  --line-1:#222228;
  --line-2:#2c2c34;
  --line-3:#3a3a44;
  /* text ramp */
  --fg-0:#f2f2f4;
  --fg-1:#c6c6ce;
  --fg-2:#8f8f9a;
  --fg-3:#63636e;
  /* brand gold: selection, primary action, priority, brand mark — never fills */
  --gold:#d4af4a;
  --gold-hi:#f0d47c;
  --gold-lo:#8c7126;
  --gold-ink:#1a1405;
  --gold-fill:#d4af4a;     /* primary button / checked box: the brand gold as a surface, ink on top */
  --gold-fill-hi:#f0d47c;
  --gold-a08:rgba(212,175,74,.08);
  --gold-a15:rgba(212,175,74,.15);
  --gold-a30:rgba(212,175,74,.30);
  /* semantic */
  --pos:#3fcf7d;  --pos-a10:rgba(63,207,125,.10);  --pos-a25:rgba(63,207,125,.25);
  --neg:#e5484d;  --neg-a10:rgba(229,72,77,.10);   --neg-a25:rgba(229,72,77,.25);
  --warn:#e0a63a; --warn-a10:rgba(224,166,58,.10); --warn-a25:rgba(224,166,58,.25);
  --info:#7aa7ff; --info-a10:rgba(122,167,255,.10);
  --scrim:rgba(0,0,0,.6);
  /* type: IBM Plex Sans for words, IBM Plex Mono for every number, code and caps label */
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --fs-mg:10px;   /* monogram letters and kbd caps only — never running text */
  --fs-0:11px;    /* caps labels, table heads, meta */
  --fs-1:12px;    /* secondary text, chips, badges */
  --fs-2:13px;    /* body, table cells */
  --fs-3:14px;    /* emphasised cells, titles in rows */
  --fs-4:16px;    /* KPI values, h2 */
  --fs-5:20px;    /* h1 */
  --fs-6:24px;    /* login h1, OTP digits */
  --fs-7:32px;    /* wordmark */
  --lh-tight:1.2;
  --lh-body:1.45;
  --track:.08em;
  /* radius: tight, terminal */
  --r-1:3px;
  --r-2:5px;
  --r-3:8px;
  --r-sheet:10px;
  /* spacing (4 px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  /* rhythm */
  --row:36px;       /* compact table row */
  --row-lg:40px;    /* comfortable table row */
  --ctl:32px;       /* desktop control height */
  --ctl-lg:44px;    /* form control on login / mobile */
  --touch:44px;     /* minimum mobile target (rows, switches, chips reach 40+) */
  --top-h:48px;
  --sub-h:40px;
  --bar-h:44px;
  --tab-h:56px;
  --dock-h:56px;
  --status-h:26px;
  --gutter:16px;
  --wrap:1680px;
  --side-w:400px;   /* match page calculator column */
  --index-w:200px;  /* settings index column */
  --sa-b:env(safe-area-inset-bottom,0px);
  --sa-t:env(safe-area-inset-top,0px);
  --sa-l:env(safe-area-inset-left,0px);
  --sa-r:env(safe-area-inset-right,0px);
  --focus:0 0 0 1px var(--bg-0),0 0 0 3px var(--gold);
  --shadow-1:0 1px 0 rgba(0,0,0,.4);
  --shadow-2:0 8px 24px rgba(0,0,0,.45);
  --z-toolbar:45; --z-sub:50; --z-status:55; --z-dock:58; --z-top:60; --z-toast:70;
  color-scheme:dark;
}
@media(max-width:720px){:root{--gutter:12px}}
@media(max-width:400px){:root{--gutter:10px}}

/* light theme: same ramp shape, inverted. Text colours are chosen for AA on the surface they sit on (fg-3 on bg-0 ≈ 4.7:1,
   gold / pos / neg / warn are darkened so they stay readable as 11–13 px text on white — the brand gold is a line and text
   colour here, never a fill lighter than the ink on it). */
html[data-theme=light]{
  --bg-0:#f4f4f6;
  --bg-1:#ffffff;
  --bg-2:#f0f0f3;
  --bg-3:#e7e7ec;
  --bg-4:#dcdce2;
  --line-0:#ececf0;
  --line-1:#e1e1e7;
  --line-2:#d1d1d9;
  --line-3:#b6b6c1;
  --fg-0:#141418;
  --fg-1:#33333b;
  --fg-2:#5b5b67;
  --fg-3:#6f6f7b;
  --gold:#8a6a12;
  --gold-hi:#a37f1a;
  --gold-lo:#c9a84c;
  --gold-ink:#1a1405;
  --gold-fill:#d4af4a;     /* the fill stays the brand gold in both themes; only text-gold darkens for contrast */
  --gold-fill-hi:#e3c25a;
  --gold-a08:rgba(138,106,18,.08);
  --gold-a15:rgba(138,106,18,.15);
  --gold-a30:rgba(138,106,18,.30);
  --pos:#167a41;  --pos-a10:rgba(22,122,65,.10);   --pos-a25:rgba(22,122,65,.25);
  --neg:#c4262c;  --neg-a10:rgba(196,38,44,.09);   --neg-a25:rgba(196,38,44,.25);
  --warn:#8e5e06; --warn-a10:rgba(142,94,6,.10);   --warn-a25:rgba(142,94,6,.25);
  --info:#2c5fc4; --info-a10:rgba(44,95,196,.10);
  --scrim:rgba(20,20,26,.45);
  --shadow-1:0 1px 0 rgba(0,0,0,.05);
  --shadow-2:0 8px 24px rgba(20,20,30,.14);
  color-scheme:light;
}