/* =========================================================================
   ORBEVA · DESIGN TOKENS — single source of truth for the whole app.
   Dark fintech "cockpit" identity.

   HOW TO USE
   - Link FIRST, before any page <style>:  <link rel="stylesheet" href="/styles/tokens.css">
   - In new / edited CSS, prefer the SEMANTIC names (--accent, --surface, --ink,
     --pos/--neg/--warn/--info). They say what a colour MEANS, not what it is.
   - Every LEGACY name (--panel, --txt, --green …) is kept as an alias below, so
     existing inline styles on every page keep working with zero visual change.
     New code should not use the legacy names — they exist only for migration.

   NOTE: historically --green held the brand PURPLE (#8b7cf6). That trap is fixed
   here: the brand colour is --accent; --green is now just an alias of it.
   ========================================================================= */
:root{
  /* — Surfaces ——————————————————————————————————————————————— */
  --bg:oklch(16.5% 0.01 257);           /* app background            */
  --surface:oklch(21% 0.01 257);        /* card / panel              */
  --surface-2:oklch(24% 0.01 257);      /* nested / inset / tiles    */
  --line:oklch(29.5% 0.01 257);         /* hairline borders & rules — DECORATIVE only (≈1.2–1.4:1 vs surfaces, below the 3:1 non-text floor). Use --line-strong where the border conveys structure/state. */
  --line-strong:oklch(53% 0.01 257);    /* AA non-text border (≥3:1): clears WCAG-AA 3:1 against bg (3.65:1), --surface (3.36:1) and --surface-2 (3.12:1). Use for input/control borders and the "unfilled track" of gauges/donuts/progress where the boundary must stay visible to low-vision users. */

  /* — Text ——————————————————————————————————————————————————— */
  --ink:oklch(94% 0.01 257);            /* primary text              */
  --ink-dim:oklch(71% 0.02 257);        /* secondary text — raised 67%→71% so dim stays clearly above the new --ink-faint 66% (the hierarchy ink>dim>faint); 6.40:1 on --surface-2 */
  --ink-faint:oklch(66% 0.02 257);      /* tertiary / labels / meta — raised 62%→66% so the app-wide 11px uppercase kicker clears WCAG-AA 4.5:1 on EVERY surface (bg 6.20:1, surface 5.70:1, surface-2 5.29:1) AND on --line-toned chips (4.46:1 ≈ AA, was 3.81:1 = fail). Stays below --ink-dim 71% to keep the ink>dim>faint hierarchy. */

  /* — Brand accent (the purple) ——————————————————————————————— */
  --accent:oklch(62% 0.16 295);         /* brand fill / solid backgrounds. As TEXT it FAILS AA on panels (4.25:1 on --surface-2, 3.59:1 on --line) — use --accent-text for accent-coloured text. */
  --accent-tint:color-mix(in oklch, var(--accent) 12%, transparent);
  --accent-edge:color-mix(in oklch, var(--accent) 28%, transparent);  /* accent borders on tinted fills */
  --accent-ink:oklch(16.5% 0.01 257);   /* text/icon ON a solid accent fill */
  --accent-text:oklch(69% 0.16 295);    /* AA accent-coloured TEXT: lighter accent (violet-level L) that clears WCAG-AA 4.5:1 on panels — 6.04:1 on --surface, 5.61:1 on --surface-2, 4.73:1 on --line-toned chips. Use this anywhere --accent is currently used as a TEXT/foreground colour. */

  /* — Semantic status ————————————————————————————————————————— */
  --pos:oklch(78% 0.13 162);  --pos-tint:color-mix(in oklch, var(--pos) 10%, transparent);   /* gains / cash / good   */
  --warn:oklch(82% 0.16 80);  --warn-tint:color-mix(in oklch, var(--warn) 10%, transparent); /* caution               */
  --neg:oklch(67% 0.17 29);   --neg-tint:color-mix(in oklch, var(--neg) 10%, transparent);   /* loss / debt / danger  */
  --info:oklch(71% 0.14 250); --info-tint:color-mix(in oklch, var(--info) 10%, transparent); /* neutral data / charts */
  --violet:oklch(69% 0.14 295); --violet-tint:color-mix(in oklch, var(--violet) 12%, transparent);
  --teal:oklch(87% 0.11 170);

  /* — Type scale (matches the sizes already in use across pages) ———— */
  --text-2xs:11px;   /* labels, kickers, fine print */
  --text-xs:12px;    /* meta, captions              */
  --text-sm:13px;    /* secondary body              */
  --text-md:14px;    /* emphasised secondary        */
  --text-base:15px;  /* body                        */
  /* Display sizes are FLUID (clamp): they shrink on narrow phones so big money
     numbers can never force horizontal overflow, and cap on large screens so
     they don't balloon. Utopia-style min / preferred(rem+vw) / max. (feedback #6)
     The body/label tier above stays fixed px on purpose — fluid body text hurts
     readability; only this large display tier needs to flex with the viewport. */
  --text-lg:clamp(17px,1rem + .6vw,19px);   /* card titles                 */
  --text-xl:clamp(18px,1rem + 1vw,20px);    /* section heroes              */
  --text-2xl:clamp(25px,5vw + .75rem,30px); /* big metrics                 */
  --text-3xl:clamp(28px,6vw + .9rem,36px);  /* the headline number         */

  /* — Spacing rhythm ——————————————————————————————————————————— */
  --sp-1:6px; --sp-2:8px; --sp-3:10px; --sp-4:14px; --sp-5:18px; --sp-6:24px;

  /* — Radii ——————————————————————————————————————————————————— */
  --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:18px; --r-pill:999px;

  /* — Elevation ———————————————————————————————————————————————— */
  --shadow-pop:0 14px 40px rgba(0,0,0,.5);
  /* Resting → raised → overlay scale (premium money depth, restrained). */
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:inset 0 1px 0 rgba(255,255,255,.045),0 16px 32px -22px rgba(0,0,0,.9);
  --shadow-3:0 14px 40px rgba(0,0,0,.5);
  --surface-raised:#1c2129;   /* one tonal step above --surface for focus/hover lift */

  /* — Z-index layers (named, so stacking is intentional, never magic ints) — */
  --z-nav:40; --z-overlay:50; --z-modal:60; --z-toast:70;

  /* — Glass blur (define-only; the consumer sets backdrop-filter) ————————— */
  --blur-bar:blur(14px); --blur-scrim:blur(3px);

  /* — Motion — one vocabulary so the whole app moves with intent —————————— */
  --dur-fast:120ms;   /* taps, state changes        */
  --dur-base:200ms;   /* default UI transition      */
  --dur-slow:380ms;   /* entrances, reveals         */
  --dur-amb:600ms;    /* ambient draws (charts)     */
  --ease-out:cubic-bezier(.2,.7,.2,1);                          /* universally supported */
  --ease-spring:linear(0,.006,.247 7%,.97 25%,1.06,1.02 42%,.998 62%,1); /* use WITH a fallback */

  /* — Touch / a11y ————————————————————————————————————————————— */
  --tap:44px;            /* minimum comfortable tap target (Apple HIG) */

  /* ===================================================================
     LEGACY ALIASES — do not use in new code. Preserved so the existing
     inline styles on every page render identically during migration.
     =================================================================== */
  --panel:var(--surface);      --panel2:var(--surface-2);
  --txt:var(--ink);            --dim:var(--ink-dim);     --faint:var(--ink-faint);
  --green:var(--accent);       --greent:var(--accent-tint);   --brand:var(--accent);
  --mint:var(--pos);           --mintt:var(--pos-tint);
  --amber:var(--warn);         --ambert:var(--warn-tint);
  --red:var(--neg);            --redt:var(--neg-tint);
  --blue:var(--info);          --bluet:var(--info-tint);
  --violett:var(--violet-tint);
}