/* ============================================================================
   CHARTER · Compliance Alliance Design System
   tokens.css — the single source of truth for design decisions.
   Three layers:  1) primitive ramps  2) semantic tokens  3) component aliases
   ========================================================================== */

:root {
  /* ---- 1. PRIMITIVES ----------------------------------------------------- */

  /* Brand — "Pine" green. CA's familiar green, refined for screens. */
  --green-50:  #ECF7F0;
  --green-100: #D1ECDD;
  --green-200: #A4D7BD;
  --green-300: #6FC098;
  --green-400: #3EA877;
  --green-500: #229963;
  --green-600: #17885A;   /* brand primary */
  --green-700: #116746;
  --green-800: #0D5137;
  --green-900: #0A3B28;

  /* Neutrals — warm "Stone" (a whisper of green keeps it on-brand, never cold) */
  --stone-0:   #FFFFFF;
  --stone-25:  #FAFAF8;   /* app paper */
  --stone-50:  #F5F5F1;
  --stone-100: #ECECE6;
  --stone-200: #DFDFD8;   /* hairline borders */
  --stone-300: #CACAC1;
  --stone-400: #A7A79D;
  --stone-500: #84847A;
  --stone-600: #62625A;   /* muted text */
  --stone-700: #45453E;
  --stone-800: #2A2A25;
  --stone-900: #1A1A16;   /* ink */

  /* Status / semantic primitives — each: base · soft bg · ink (text on soft) */
  --success:      #279C67;  --success-soft: #E3F2EA;  --success-ink: #136340;
  --info:         #3571B7;  --info-soft:    #E6F0FA;  --info-ink:    #204E86;
  --warn:         #D2921E;  --warn-soft:    #FBF0D8;  --warn-ink:    #8F5E09;
  --urgent:       #D36032;  --urgent-soft:  #FAE8DF;  --urgent-ink:  #973917;
  --critical:     #C8241D;  --critical-soft:#F9E1DF;  --critical-ink:#901611;
  --ai:           #6B4FDC;  --ai-soft:      #EBE6FC;  --ai-ink:      #422DA8;

  /* ---- 2. SEMANTIC (themeable) ----------------------------------------- */
  --bg:            var(--stone-25);
  --surface:       var(--stone-0);
  --surface-2:     var(--stone-50);
  --surface-sunken:var(--stone-100);
  --border:        var(--stone-200);
  --border-strong: var(--stone-300);
  --text:          var(--stone-900);
  --text-muted:    var(--stone-600);
  --text-subtle:   var(--stone-500);
  --text-inverse:  var(--stone-0);

  /* --brand* = IDENTITY. The CA mark, brand-voice flourishes. Never swaps —
     it is who the product is, not a functional signal. */
  --brand:         var(--green-600);
  --brand-hover:   var(--green-700);
  --brand-ink:     var(--green-700);   /* brand color safe for text-on-light */
  --brand-soft:    var(--green-50);
  --brand-contrast:#FFFFFF;

  /* --accent* = FUNCTIONAL UI + DATA. Primary actions, controls, links,
     chart series. Defaults to the brand green, but a color-vision mode is
     free to remap it (see red-green below) without touching brand identity. */
  --accent:         var(--green-600);
  --accent-hover:   var(--green-700);
  --accent-ink:     var(--green-700);
  --accent-soft:    var(--green-50);
  --accent-contrast:#FFFFFF;

  --focus-ring:    0 0 0 3px rgba(23,136,90,.28);
  --accent-ai:     var(--ai);

  /* ---- 3. TYPOGRAPHY ---------------------------------------------------- */
  --font-display: "Petrona", Georgia, "Times New Roman", serif;
  --font-sans:    "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Golden type scale — a √φ ladder (×1.272 per step) anchored at 15px, so
     every OTHER rung is an exact golden ratio (φ ≈ 1.618). xs / sm / md are
     practical exceptions where φ would hurt density or legibility. */
  --text-xs:   0.75rem;     /* 12   · caption (practical) */
  --text-sm:   0.8125rem;   /* 13   · secondary (practical) */
  --text-base: 0.9375rem;   /* 15   · anchor / default body */
  --text-md:   1.0625rem;   /* 17   · practical mid-step */
  --text-lg:   1.1875rem;   /* 19   · 15 × √φ */
  --text-xl:   1.5rem;      /* 24   · 15 × φ          (φ from base) */
  --text-2xl:  1.9375rem;   /* 31   · 15 × φ√φ */
  --text-3xl:  2.4375rem;   /* 39   · 15 × φ²         (φ² from base) */
  --text-4xl:  3.125rem;    /* 50   · 15 × φ²√φ */

  --leading-tight:  1.2;     /* display headings */
  --leading-snug:   1.382;   /* 1 + 1/φ²  — golden minor */
  --leading-normal: 1.5;     /* dense UI */
  --leading-relaxed:1.618;   /* φ — body prose */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;

  /* ---- 4. SPACE — the SAME golden √φ ladder as type, anchored at 15 -----
     space-4..space-12 share exact values with the type scale (15·19·24·31·39·50),
     so vertical rhythm and type sit on one harmonic grid. 1 & 2 stay on the micro grid. */
  --space-0:  0;
  --space-1:  0.25rem;     /* 4   · micro (practical) */
  --space-2:  0.5rem;      /* 8   · micro (practical) */
  --space-3:  0.8125rem;   /* 13  · practical (shares sm) */
  --space-4:  0.9375rem;   /* 15  · anchor */
  --space-5:  1.1875rem;   /* 19  · × √φ */
  --space-6:  1.5rem;      /* 24  · × φ */
  --space-8:  1.9375rem;   /* 31  · × φ√φ */
  --space-10: 2.4375rem;   /* 39  · × φ² */
  --space-12: 3.125rem;    /* 50  · × φ²√φ */
  --space-16: 4rem;        /* 64  · × φ³ */
  --space-20: 5.0625rem;   /* 81  · × φ³√φ */

  /* ---- 5. RADIUS — Fibonacci (5·8·13·21·34); its ratios converge on φ --- */
  --radius-sm:  5px;
  --radius-md:  8px;
  --radius-lg:  13px;
  --radius-xl:  21px;
  --radius-2xl: 34px;
  --radius-pill:999px;

  /* ---- 6. ELEVATION ---------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(20,20,16,.05);
  --shadow-sm: 0 1px 3px rgba(20,20,16,.07), 0 1px 2px rgba(20,20,16,.04);
  --shadow-md: 0 4px 14px rgba(20,20,16,.08), 0 2px 4px rgba(20,20,16,.04);
  --shadow-lg: 0 14px 38px rgba(20,20,16,.13), 0 4px 10px rgba(20,20,16,.06);

  /* ---- 7. MOTION ------------------------------------------------------- */
  --ease:        cubic-bezier(.2,.6,.2,1);
  --ease-out:    cubic-bezier(.16,.84,.44,1);
  --dur-fast:    120ms;
  --dur:         170ms;
  --dur-slow:    260ms;

  /* ---- 8. LAYOUT ------------------------------------------------------- */
  --phi:        1.618;   /* governs the type & space ladder */
  --phi-root:   1.272;   /* √φ — the per-step ratio of the ladder */
  --sidebar-w:   264px;  /* practical */
  --topbar-h:    60px;
  --content-max: 832px;  /* practical reading column */

  /* ---- 9. LAYERING — one documented stacking order, base → toast.
     Every floating thing pulls from here so nothing fights over a random
     z-index. Gaps of 100 leave room to slot things in later. */
  --z-base:      0;
  --z-raised:    10;    /* sticky table headers, raised cards */
  --z-sticky:    50;    /* sticky section bars, toolbars */
  --z-sidebar:   90;
  --z-topbar:    100;
  --z-dropdown:  300;   /* menus, selects, comboboxes, tooltips-on-controls */
  --z-drawer:    400;   /* side sheets, the assistant dock */
  --z-overlay:   500;   /* modal scrim */
  --z-modal:     510;   /* modal dialog above its scrim */
  --z-popover:   600;   /* coach marks, contextual help bubbles */
  --z-toast:     700;   /* always on top */

  /* ---- 10. BORDER WIDTH ------------------------------------------------- */
  --border-w-0:  0;
  --border-w-1:  1px;   /* default hairline */
  --border-w-2:  2px;   /* emphasis: active tab, checked, focus inset */
  --border-w-3:  3px;   /* heavy: left-rail status accents, focus ring */

  /* ---- 11. OPACITY ----------------------------------------------------- */
  --opacity-disabled: 0.45;   /* disabled controls */
  --opacity-muted:    0.65;   /* de-emphasized / ghosted */
  --opacity-scrim:    0.50;   /* modal/backdrop wash */
  --opacity-hover:    0.08;   /* tint strength for hover overlays */
}

/* ---- DARK THEME ---- only semantic tokens flip; primitives stay fixed ---- */
:root[data-theme="dark"] {
  --bg:            #14150F;
  --surface:       #1D1E18;
  --surface-2:     #24251E;
  --surface-sunken:#121309;
  --border:        #33342C;
  --border-strong: #45463C;
  --text:          #ECECE4;
  --text-muted:    #A6A79B;
  --text-subtle:   #7E7F73;
  --text-inverse:  #14150F;

  --brand:         var(--green-400);
  --brand-hover:   var(--green-300);
  --brand-ink:     var(--green-300);
  --brand-soft:    #15291F;
  --brand-contrast:#0E2017;
  /* functional accent mirrors brand in dark (it defaults to brand green) */
  --accent:         var(--green-400);
  --accent-hover:   var(--green-300);
  --accent-ink:     var(--green-300);
  --accent-soft:    #15291F;
  --accent-contrast:#0E2017;
  --focus-ring:    0 0 0 3px rgba(69,155,115,.36);

  --success-soft:#142B1E; --success-ink:#77D3A3;
  --info-soft:   #142130; --info-ink:   #87B6E8;
  --warn-soft:   #2D240D; --warn-ink:   #ECBC58;
  --urgent-soft: #2F190F; --urgent-ink: #ED9468;
  --critical-soft:#2F1210; --critical-ink:#EF8680;
  --ai-soft:     #1C1836; --ai-ink:     #AF9DF5;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 14px 38px rgba(0,0,0,.55);
}

/* ============================================================================
   COLOR-VISION MODES — opt-in palettes that swap the SEMANTIC STATUS tokens.
   Default palette is untouched (no data-cvd). Components inherit automatically.
   The risk scale (success→warn→urgent→critical) is spread across CVD-distinguishable
   hues; soft/ink tints are derived via color-mix so they adapt to light & dark.
   ========================================================================== */

/* Red-green safe (deuteranopia / protanopia — the most common CVD).
   "Good" leaves the warm axis entirely (blue); the warning ramp is spread by
   LIGHTNESS — light gold → mid orange → dark red — so the three stay distinct
   even when hue collapses. Lightness survives every CVD; hue does not. */
:root[data-cvd="redgreen"] {
  --success:  #1763A6;  /* blue       — "good" moves off the red-green axis  */
  --info:     #0E8FA0;  /* teal/cyan  — cool, distinct from the blue         */
  --warn:     #E8B21F;  /* gold  · light  ┐                                  */
  --urgent:   #E06A12;  /* orange · mid   │ monotonic lightness ramp         */
  --critical: #9E1C1A;  /* red   · dark   ┘ pronounced amber → red contrast  */
  --ai:       #A435C9;  /* orchid — magenta-leaning violet, off the blue:
                           deuter keeps the hue, protan reads it by lightness */

  /* Functional UI + data leave the green axis too (charts/buttons/controls).
     Brand identity (--brand) is untouched. Tritan keeps green — see below. */
  --accent:         #1A6FB5;
  --accent-hover:   #155C97;
  --accent-ink:     color-mix(in srgb, #1A6FB5 72%, var(--text));
  --accent-soft:    color-mix(in srgb, #1A6FB5 14%, var(--surface));
  --accent-contrast:#FFFFFF;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #1A6FB5 30%, transparent);
}

/* Tritanopia (blue-yellow CVD — rare). Reds & greens read fine; the risk
   ramp is again spread by lightness so it never relies on the blue/yellow axis. */
:root[data-cvd="tritan"] {
  --success:  #2E8B43;  /* green                                        */
  --info:     #1F6FB8;  /* blue                                         */
  --warn:     #E59A12;  /* amber-orange · light ┐                       */
  --urgent:   #DA5320;  /* vermillion   · mid   │ monotonic lightness   */
  --critical: #9E1C1A;  /* deep red     · dark  ┘                       */
  --ai:       #C24FA0;  /* pink-magenta                                 */
  /* --accent intentionally stays brand green here: tritanopia confuses
     blue↔green, so a blue accent would collide with the green "success". */
}

/* Derive soft (tint) + ink (text) from the swapped base, in any CVD mode.
   color-mix against --surface / --text keeps them correct in light AND dark. */
:root[data-cvd] {
  --success-soft: color-mix(in srgb, var(--success) 15%, var(--surface));   --success-ink: color-mix(in srgb, var(--success) 72%, var(--text));
  --info-soft:    color-mix(in srgb, var(--info) 15%, var(--surface));       --info-ink:    color-mix(in srgb, var(--info) 72%, var(--text));
  --warn-soft:    color-mix(in srgb, var(--warn) 18%, var(--surface));       --warn-ink:    color-mix(in srgb, var(--warn) 74%, var(--text));
  --urgent-soft:  color-mix(in srgb, var(--urgent) 16%, var(--surface));     --urgent-ink:  color-mix(in srgb, var(--urgent) 72%, var(--text));
  --critical-soft:color-mix(in srgb, var(--critical) 15%, var(--surface));   --critical-ink:color-mix(in srgb, var(--critical) 72%, var(--text));
  --ai-soft:      color-mix(in srgb, var(--ai) 15%, var(--surface));         --ai-ink:      color-mix(in srgb, var(--ai) 72%, var(--text));
}