/* ============================================================
   Compass — Design Tokens
   Single source of truth for colour, type, spacing and radius.

   Plain CSS custom properties. No build step, no framework.
   Load order: tokens BEFORE components BEFORE site.css.

   Naming: --<group>-<role>-<step>.  Groups: brand, ink, surface,
   line, score, state, space, radius, shadow, font, text, control.
   Edit values HERE only; everything downstream inherits.
   ============================================================ */

/* Base reset — every design source assumes border-box; loads before components so no
   per-component box-sizing lines are needed. Fixes .c-btn--block padding overflow and the
   c-check__box on/off size mismatch. */
*, *::before, *::after { box-sizing: border-box; }

:root {

  /* ---- 1. BRAND ---------------------------------------- */
  --brand-indigo:  #4E5BF2;
  --brand-violet:  #8B43E0;
  --brand-magenta: #DB2FB0;

  /* The signature gradient. Use for primary CTAs, the active
     work-area pill, gauge arcs, dimension-card headers, hero.
     Text-safe: white 13px/700 clears 5:1 at every stop. */
  --brand-gradient: linear-gradient(120deg, #4E5BF2 0%, #8B43E0 52%, #A93BC8 100%);
  /* Per-dimension header gradients (Cause→Capability→Culture) */
  --grad-cause:      linear-gradient(120deg, #4E5BF2 0%, #7440D6 100%);
  --grad-capability: linear-gradient(120deg, #7440D6 0%, #A93BC8 100%);
  --grad-culture:    linear-gradient(120deg, #A93BC8 0%, #DB2FB0 100%);

  /* Violet tints — quiet brand accents on light surfaces */
  --brand-violet-text: #8A52E0;  /* links, small accents on white */
  --brand-violet-700:  #6A4BCB;  /* chip text */
  --brand-violet-50:   #F4F2FD;  /* tinted fills, info notes */
  --brand-violet-100:  #ECE7FB;  /* tinted borders */
  --brand-magenta-50:  #FBE9F5;  /* soft magenta tile fill — participation stat-card icon */

  /* ---- 2. INK (text + dark surfaces) ------------------- */
  /* Three tiers, one job each. Above 4.5:1 there is no room for two muted
     copy values, so --ink-500 is the ONE muted copy value and --ink-400 is
     non-text only. Below --ink-500, de-emphasis is size / weight / case,
     never a lighter grey. */
  --ink-900: #1A2238;  /* primary text · nav rail · headings */
  --ink-700: #3C4356;  /* strong body / form labels */
  --ink-500: #64697F;  /* the ONE muted copy value — meta, secondary, placeholders */
  --ink-400: #7E8497;  /* non-text tier — glyphs, carets, icons in tint tiles, bar fills */
  --ink-300: #B7BCCC;  /* inert typographic marks between two readable labels — and nothing else.
                          Its ONLY consumers are .c-breadcrumb__sep, .c-ctx__sep, .c-pagination__gap.
                          Never text, never a state, never an affordance. */

  /* ---- 3. SURFACE + LINES ------------------------------ */
  --surface:    #FFFFFF;  /* cards, bars, app chrome */
  --surface-2:  #FBFBFE;  /* subtle inset (input fields) */
  --canvas:     #F5F6FC;  /* dashboard background */
  --canvas-2:   #EAEDF5;  /* review / app shell background */
  --track:      #EEF0F6;  /* progress-bar & well background */
  --line:       #E6E8F2;  /* default border — surface hairline, never a control edge */
  --line-soft:  #ECEEF4;  /* hairline divider inside cards */
  --control-border: #767C90;  /* interactive control perimeter — secondary button, checkbox, radio, pick, step connector, off-state switch */

  /* ---- 4. SCORE SCALE (0–10, diverging) ---------------- */
  /* Map a score to a bucket colour by threshold — FIVE bands. Numeric boundaries
     are set server-side:
       < 5.0 low · 5.0–5.9 watch · 6.0–6.9 mid · 7.0–7.9 good · 8.0+ strong
     Band→token:  1 low · 2 watch · 3 mid · 4 good · 5 strong.
     White chip text is kept across all five tiers; the number reinforces the colour. */
  --score-low:    #E2574B;  /* Band 1 · < 5.0   */
  --score-watch:  #E59A38;  /* Band 2 · 5.0–5.9 */
  --score-mid:    #E7C13C;  /* Band 3 · 6.0–6.9 (NEW — inserted between watch and good) */
  --score-good:   #7FB04A;  /* Band 4 · 7.0–7.9 */
  --score-strong: #1FA079;  /* Band 5 · 8.0+    */
  /* Continuous reference ramp (legend bar only) — five even stops */
  --score-ramp: linear-gradient(90deg, #E2574B 0%, #E59A38 25%, #E7C13C 50%, #7FB04A 75%, #1FA079 100%);

  /* ---- 5. STATE / SEMANTIC ----------------------------- */
  --state-positive: #1FA079;  /* % positive, success, "you ▲ industry" */
  --state-warning:  #E59A38;
  --state-negative: #E2574B;  /* % negative, errors */
  --state-info:     #4E5BF2;
  --state-positive-soft: #E6F5EF;
  --state-negative-soft: #FBEAE7;
  --state-info-soft:     #EEF0FE;

  /* ---- 6. SPACING (4px base) --------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- 7. RADIUS --------------------------------------- */
  --radius-sm:  8px;   /* chips, inputs, small controls */
  --radius-md:  12px;  /* default card */
  --radius-lg:  14px;  /* dashboard cards */
  --radius-xl:  18px;  /* hero / window frames */
  --radius-pill: 999px;

  /* ---- 8. SHADOW / ELEVATION --------------------------- */
  --shadow-xs: 0 1px 2px rgba(26,34,56,.04);
  --shadow-sm: 0 1px 3px rgba(26,34,56,.08);
  --shadow-md: 0 8px 24px -10px rgba(40,30,90,.18);
  --shadow-lg: 0 26px 60px -30px rgba(40,30,90,.34);
  /* Two layers, same 4px footprint, still a shadow: violet carries light
     surfaces, the white spacer carries dark ones and separates the ring from
     the primary CTA's own violet glow. No outline, no offset, no layout shift. */
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #8B43E0;

  /* ---- 9. TYPOGRAPHY ----------------------------------- */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif; /* headings, metrics */
  --font-body:    "Public Sans", system-ui, sans-serif;       /* body, UI, data */

  /* Sizes (px). Pair with weights/line-heights below. */
  --text-display-xl: 44px;  /* page hero            800 / 1.08 */
  --text-display-lg: 32px;  /* section hero         800 / 1.10 */
  --text-h1:         27px;  /* screen title         700 / 1.15 */
  --text-h2:         22px;  /* card group title     700 / 1.20 */
  --text-h3:         18px;  /* card title           700 / 1.25 */
  --text-title:      17px;  /* sub-section          700 / 1.30 */
  --text-body-lg:    16px;  /* lead body            400 / 1.55 */
  --text-body:       14px;  /* default body / UI    400 / 1.55 */
  --text-body-sm:    13px;  /* dense rows           400 / 1.50 */
  --text-label:      13px;  /* form labels          600 / 1.30 */
  --text-caption:    12px;  /* meta                 500 / 1.40 */
  --text-overline:   11px;  /* eyebrow UPPER 700 · letter-spacing .08em */
  --text-metric-lg:  30px;  /* KPI number           700 / 1.00 · tabular */
  --text-metric:     24px;  /* score number         700 / 1.00 · tabular */

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

  /* Always use tabular figures for scores, %, counts: */
  /* font-variant-numeric: tabular-nums; */

  /* ---- 10. CONTROLS ------------------------------------ */
  --control-h:     46px;  /* inputs, selects, buttons */
  --control-h-lg:  52px;  /* primary auth button */
  --control-h-sm:  38px;  /* filter chips */
  --appbar-h:      62px;
  --tabbar-h:      50px;
  --navrail-w:     230px;

  /* ---- 11. MOTION -------------------------------------- */
  --t-fast: 120ms ease;
  --t:      180ms ease;
  --t-slow: 280ms cubic-bezier(.4,0,.2,1);

  /* ---- 12. Promoted from component hex ---- */
  --brand-gradient-deep: linear-gradient(150deg, #3F2BA8 0%, #7430C8 52%, #C42FA0 100%); /* auth panel + home hero */
  --focus-border:   #C9B6F2;   /* input focus / secondary-btn hover border */
  --line-strong:    #D2D7E6;   /* stronger hairline (requirement tick, etc.) */
  --check-border:   #C7CCDC;   /* unchecked check / radio border */
  --fill-muted:     #F4F5FA;   /* filter chip / inert control fill */
  --state-negative-border: #F3CFC9;
  --state-negative-text:   #B23A2E;
  --empty-border:    #DCE0EC;
  --noaccess-border: #F0E4E2;
  --noaccess-bg:     #FDF7F6;
  --skeleton-hl:     #E2E5F0;
  /* Admin module — amber state set */
  --state-warning-soft: #FBF1DF;  /* warning pill bg / amber surfaces · Not-invited pill · caution modal */
  --state-warning-text: #9A6B16;  /* warning pill text · impersonation banner · caution modal icon */
  /* Amber set border — completes the amber set for the [!warning] content callout edge;
     parallels --state-negative-border. Reused wherever the amber notice needs a 1px border. */
  --state-warning-border: #F0DEB8;
}