/* ═══════════════════════════════════════════════════════════════════
   tokens.css
   inPowerSuite.AI — Shared Primitive Scale Tokens

   Load order (site):
     1. tokens.css       ← this file (primitives — no theme logic)
     2. base-2.css       ← site semantic aliases + common classes
     3. site.css         ← site page styles

   Load order (demo):
     1. tokens.css       ← same foundation
     2. demo-base-2.css  ← demo semantic aliases + di-* components
     3. demo.css         ← per-demo overrides + page styles

   Rules:
     — Primitive values only. No semantic aliases.
     — No theme override blocks ([data-theme], body.demo-*).
     — No component classes.
     — No color values. Colors live in base-2.css / demo-base-2.css.
     — All values are theme-neutral.

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────────
   1.  Spacing
   2.  Border Radius
   3.  Font Weight        (already in base-2.css — referenced here)
   4.  Duration — Interaction
   5.  Duration — Entrance Animation
   6.  Line Height
   7.  Letter Spacing
   8.  Sizing — Structural Dimensions
════════════════════════════════════════════════════════════════════ */


:root {

/* ═══════════════════════════════════════════════════════════════════
   1. SPACING
   Usage: padding, gap, margin (and directional variants)
   Scale: 26 steps covering 0–48px observed rhythm.
   Two-tier naming:
     Tier 1 (dense UI, 0–10px): semantic names
     Tier 2 (layout, 11–48px): xl-suffix series
   Values above 48px (56/60/64/72/80/96px) are structural
   one-offs — kept as raw values in class rules.
════════════════════════════════════════════════════════════════════ */

  /* ── Tier 1 — Dense UI (0–10px) ────────────────────────────────── */
  --space-none:    0;      /* reset / explicit zero                    */
  --space-px:      1px;    /* hairline — dividers, micro insets    × 8 */
  --space-xs:      2px;    /* micro — dot spacing, tight gaps     ×13  */
  --space-sm:      3px;    /* extra-small — compressed badges     ×13  */
  --space-tight:   4px;    /* small — icon gaps, tight padding    ×23  */
  --space-narrow:  5px;    /* small-plus — pill padding, tab gaps ×25  */
  --space-base:    6px;    /* compact — button/filter padding     ×32  */
  --space-slack:   7px;    /* compact-plus — avatar gaps          × 4  */
  --space-wide:    8px;    /* standard — dominant gap value       ×37  */
  --space-2xwide:  9px;    /* base-plus — card padding, sidebar   ×18  */
  --space-3xwide: 10px;    /* medium — content gaps               ×33  */

  /* ── Tier 2 — Layout (11–48px) ─────────────────────────────────── */
  --space-lg:     11px;    /* medium-plus — row padding           ×12  */
  --space-xl:     12px;    /* standard-lg — card padding          ×22  */
  --space-2xl:    14px;    /* elevated — form / panel padding     ×14  */
  --space-3xl:    16px;    /* section — content area padding      ×12  */
  --space-4xl:    18px;    /* section-plus — nav padding          × 5  */
  --space-5xl:    20px;    /* layout — page section gaps          ×23  */
  --space-6xl:    22px;    /* layout-plus                         × 4  */
  --space-7xl:    24px;    /* large — panel spacing               × 8  */
  --space-8xl:    28px;    /* hero-sm — page hero padding         ×14  */
  --space-9xl:    32px;    /* hero-md — content area padding      ×10  */
  --space-10xl:   36px;    /* hero-lg — card section padding      × 4  */
  --space-11xl:   40px;    /* hero-xl — section breathing room    × 7  */
  --space-12xl:   44px;    /* hero-2xl                            × 2  */
  --space-13xl:   48px;    /* hero-3xl — hero top padding         ×16  */


/* ═══════════════════════════════════════════════════════════════════
   2. BORDER RADIUS
   Shared primitive scale covering both site (large, soft radii)
   and demo (small, data-dense UI radii). Semantic aliases in
   base-2.css and demo-base-2.css point into this scale.
════════════════════════════════════════════════════════════════════ */

  --radius-p-2xs:    2px;   /* micro — track fills, bar tops, tight chips  */
  --radius-p-xs:     3px;   /* extra-small — subtle rounding          ×10  */
  --radius-p-sm:     4px;   /* small — demo badges (di-radius-sm)     × 2  */
  --radius-p-md:     5px;   /* medium-small — between sm and base     × 3  */
  --radius-p-base:   6px;   /* base — demo buttons, pills (di-radius-md) ×2 */
  --radius-p-lg:     8px;   /* large — demo cards (di-radius-lg)      × 8  */
  --radius-p-xl:    10px;   /* site small card / compact element      × 2  */
  --radius-p-2xl:   12px;   /* demo modals (di-radius-xl); site subnav ×1  */
  --radius-p-3xl:   14px;   /* site pill / badge variant              × 3  */
  --radius-p-4xl:   16px;   /* site image wrap corners                × 1  */
  --radius-p-5xl:   20px;   /* demo pill (di-radius-pill); site card  × 3  */
  --radius-p-6xl:   22px;   /* site logo / avatar rounding            × 1  */
  --radius-p-pill: 100px;   /* fully rounded — site pill buttons      × 2  */
  --radius-p-circle: 50%;   /* perfect circle — avatars, dots, rings  ×11  */


/* ═══════════════════════════════════════════════════════════════════
   3. FONT WEIGHT
   Numeric weight scale. All other files reference these tokens —
   no hard-coded numeric font-weight values anywhere in the codebase.
════════════════════════════════════════════════════════════════════ */

  --fw-light:      300;   /* light prose, decorative                  */
  --fw-regular:    400;   /* body copy, default                       */
  --fw-medium:     500;   /* emphasis, interactive labels             */
  --fw-semibold:   600;   /* section labels, card titles              */
  --fw-bold:       700;   /* KPI sub-labels, table headers            */
  --fw-extrabold:  800;   /* KPI values, hero stats                   */
  --fw-black:      900;   /* topbar wordmark, display accents         */


/* ═══════════════════════════════════════════════════════════════════
   4. DURATION — INTERACTION TRANSITIONS
   UI feedback speed scale. Used in transition: declarations.
   Shared by both site and demo layers.

   Semantic naming reflects perceptual speed, not raw time.
   Faster values feel more responsive; slower feel more deliberate.

   Migration map from old token names to new:
     duration-fast    0.15s  →  duration-pace
     duration-base    0.2s   →  duration-slow
     duration-slow    0.25s  →  duration-2xslow
     duration-slower  0.3s   →  duration-3xslow
     duration-ease    0.35s  →  duration-base
     duration-anim    0.4s   →  duration-4xslow
     duration-long    0.45s  →  raw value (single use — not tokenized)
     duration-xl      0.55s  →  raw value (single use — not tokenized)
════════════════════════════════════════════════════════════════════ */

  --duration-fast:    0.1s;   /* snap — instant feedback, micro hover     */
  --duration-pace:    0.15s;  /* pace — hover fills, border color         */
  --duration-slow:    0.2s;   /* slow — standard UI transitions           */
  --duration-2xslow:  0.25s;  /* 2× slow — overlay, subnav               */
  --duration-3xslow:  0.3s;   /* 3× slow — drawer, nav open/close        */
  --duration-base:    0.35s;  /* base — panel, card hover, spring easing  */
  --duration-4xslow:  0.4s;   /* 4× slow — data fills, chart animations  */


/* ═══════════════════════════════════════════════════════════════════
   5. DURATION — ENTRANCE ANIMATIONS
   Page load and section reveal animations (fadeUp, fadeIn).
   Used in animation: declarations in site.css only.
   Not used for interaction transitions.

   Stagger delay values (0.05s / 0.1s / 0.2s / 0.3s / 0.4s) are
   context-specific and kept as raw values in animation declarations.

   Pulse / loop animation timings (1.4s, 1.8s, 2.0s) are element-
   specific and kept as raw values — not tokenized.
════════════════════════════════════════════════════════════════════ */

  --anim-enter-sm:    0.6s;   /* tight entrance — fast page element       */
  --anim-enter-base:  0.7s;   /* standard entrance — most common          */
  --anim-enter-lg:    0.8s;   /* deliberate entrance — hero, cards        */
  --anim-enter-xl:    0.9s;   /* slow reveal — major sections             */
  --anim-enter-2xl:   1.0s;   /* maximum entrance — full-page reveals     */


/* ═══════════════════════════════════════════════════════════════════
   6. LINE HEIGHT
   Unitless ratio scale — 8 steps covering all observed values.
   Single-use values rounded to nearest step:
     1.25 → --leading-base (1.3)
     1.35 → --leading-base (1.3)
     1.55 → --leading-lg   (1.5)
     1.65 → --leading-xl   (1.6)
     1.75 → --leading-2xl  (1.7)
     2.0  → raw value (single use — not tokenized)
════════════════════════════════════════════════════════════════════ */

  --leading-none:   1;      /* tight display — KPI numbers, hero values ×4  */
  --leading-tight:  1.1;    /* headings, large display text             ×6  */
  --leading-snug:   1.2;    /* card titles, mono labels                 ×5  */
  --leading-base:   1.3;    /* labels, section headers, body            ×4  */
  --leading-md:     1.4;    /* body text, muted content                 ×3  */
  --leading-lg:     1.5;    /* card body, list items                    ×6  */
  --leading-xl:     1.6;    /* long-form body text                      ×4  */
  --leading-2xl:    1.7;    /* loose — hero subtitle, airy layout       ×4  */


/* ═══════════════════════════════════════════════════════════════════
   7. LETTER SPACING
   Two groups: em-based (site typography) and px-based (demo mono).
   Negative values tighten large display type.
   Positive values open up all-caps / mono labels.
════════════════════════════════════════════════════════════════════ */

  /* ── em-based — site typography ────────────────────────────────── */
  --tracking-tightest: -0.03em;  /* large headings — h1 display      × 8 */
  --tracking-tight:    -0.02em;  /* display text — KPI numbers        × 5 */
  --tracking-snug:     -0.01em;  /* elevated body — slight tightening × 6 */
  --tracking-none:      0em;     /* reset tracking                    × 2 */
  --tracking-wide:      0.04em;  /* label spacing                     × 2 */
  --tracking-wider:     0.07em;  /* tab labels, mono uppercase         × 1 */
  --tracking-widest:    0.18em;  /* eyebrow labels — dominant ×12         */
  --tracking-ultra:     0.22em;  /* eyebrow-accent, styled labels     × 2 */

  /* ── px-based — demo mono labels ───────────────────────────────── */
  --tracking-kpi:    -1px;    /* KPI display numbers — tight mono   × 2  */
  --tracking-mono:   0.5px;   /* mono meta text — dominant demo ×11      */
  --tracking-meta:   0.4px;   /* stat tile labels                   × 1  */
  --tracking-subtle: 0.3px;   /* minor tracking adjustment          × 1  */


/* ═══════════════════════════════════════════════════════════════════
   8. SIZING — STRUCTURAL DIMENSIONS
   Semantic tokens for repeated component dimensions.
   One-off layout maximums (1080/900/680/560px) are not tokenized —
   kept as raw values in class rules.
════════════════════════════════════════════════════════════════════ */

  /* ── Icon / logo dimensions ─────────────────────────────────────── */
  --size-icon-sm:  20px;   /* small icon, close button              × 8 */
  --size-icon-md:  24px;   /* standard icon, logo mark              × 3 */
  --size-icon-lg:  32px;   /* large icon, header logo               × 6 */

  /* ── Indicator dot dimensions ───────────────────────────────────── */
  --size-dot-xs:    5px;   /* notification dot                      × 3 */
  --size-dot-sm:    6px;   /* pulse dot, tab dot                    × 3 */
  --size-dot-md:    7px;   /* status dot, ticker dot                × 6 */
  --size-dot-lg:    8px;   /* section dot, legend dot               × 3 */
  --size-dot-xl:    9px;   /* card glow dot, eyebrow dot            × 2 */

  /* ── Track / bar dimensions ─────────────────────────────────────── */
  --size-track-xs:   4px;   /* hairline — dim-row, score-bar        × 2 */
  --size-track-sm:   5px;   /* thin — table performance bar         × 2 */
  --size-track-md:   6px;   /* standard — dim-row fill              × 2 */
  --size-track-lg:   8px;   /* medium — progress bar track          × 3 */
  --size-track-xl:  10px;   /* wide — funnel rows                   × 1 */
  --size-track-2xl: 14px;   /* tall — default progress height       × 1 */

}

/* ═══════════════════════════════════════════════════════════════════
   9. COLOR PRIMITIVES
   Raw palette values only. Theme-aware semantic aliases
   (--color-bg, --surface, --navy, --accent, etc.) live in base-2.css
   and change between light/dark. Primitives here are fixed.

   Rule: if a color value changes between light and dark themes,
   it belongs in base-2.css — not here.
════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Universal ──────────────────────────────────────────────────── */
  --color-white:  #ffffff;
  --color-black:  #000000;

  /* ── Brand palette ──────────────────────────────────────────────── */
  --color-c1:  #3d8bd4;   /* primary blue — accent default            */
  --color-c2:  #5ba3e0;   /* secondary blue — lighter accent          */
  --color-c3:  #2eaaa0;   /* teal — third accent                      */
  --color-c4:  #8b5cf6;   /* purple — fourth accent                   */
  --color-enginuity-accent: #f97316;  /* Enginuity Point orange       */

  /* ── Dark shell primitives ──────────────────────────────────────── */
  --color-overlay-page: #0a0f1a;   /* full-page overlay bg (always dark) */

  /* ── Accent alpha primitives ────────────────────────────────────── */
  /* Raw rgba steps of --color-c1 (#3d8bd4). Semantic aliases         */
  /* (--accent-dot, --accent-hover, etc.) live in base-2.css.         */
  --color-accent-alpha-1: rgba(61, 139, 212, 0.04);
  --color-accent-alpha-2: rgba(61, 139, 212, 0.06);
  --color-accent-alpha-3: rgba(61, 139, 212, 0.08);
  --color-accent-alpha-4: rgba(61, 139, 212, 0.10);
  --color-accent-alpha-5: rgba(61, 139, 212, 0.12);
  --color-accent-alpha-6: rgba(61, 139, 212, 0.18);
  --color-accent-alpha-7: rgba(61, 139, 212, 0.22);  /* card shadow glow  */

}


/* ═══════════════════════════════════════════════════════════════════
   10. COLOR PALETTE PRIMITIVES
   Raw hex values for light and dark theme surfaces, text, and borders.
   Semantic aliases in base-2.css reference these and switch on theme.

   Naming convention:
     --palette-*      named hex colors (light and dark surface values)
     --white-alpha-*  white at opacity steps (glass / overlay UI)
     --shadow-alpha-* black at opacity steps (shadow fills)
     --dark-alpha-*   near-black at opacity (nav backdrops)
     --light-alpha-*  near-white at opacity (light nav backdrop)
     --gradient-*     gradient primitives
════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Light theme surface palette ────────────────────────────────── */
  --palette-bg-light:      #f0f4f8;   /* page background (light)        */
  --palette-text-light:    #3a4a5c;   /* body text (light)              */
  --palette-muted-light:   #8a96a3;   /* muted text (light)             */
  --palette-border-light:  #dde3ea;   /* border (light)                 */
  --palette-card-light:    #e8edf2;   /* card background (light)        */
  --palette-navy:          #253347;   /* navy — footer bg, headings     */
  --palette-blue-deep:     #2a72b8;   /* deep blue — gradient end stop  */

  /* ── Dark theme surface palette ────────────────────────────────────*/
  --palette-bg-dark:       #0d1117;   /* page background (dark)         */
  --palette-surface-dark:  #161b22;   /* surface (dark)                 */
  --palette-card-dark:     #1c2128;   /* card background (dark)         */
  --palette-text-dark:     #c9d1d9;   /* body text (dark)               */
  --palette-muted-dark:    #6e7681;   /* muted text (dark)              */
  --palette-navy-light:    #e6edf3;   /* navy inverted for dark theme   */

  /* ── White alpha steps (glass / overlay surfaces) ──────────────── */
  --white-alpha-1:  rgba(255, 255, 255, 0.08);   /* subtle glass        */
  --white-alpha-2:  rgba(255, 255, 255, 0.14);   /* hover glass         */
  --white-alpha-3:  rgba(255, 255, 255, 0.30);   /* dim text/logo       */
  --white-alpha-4:  rgba(255, 255, 255, 0.40);   /* footer text         */
  --white-alpha-5:  rgba(255, 255, 255, 0.65);   /* overlay body text   */
  --white-alpha-6:  rgba(255, 255, 255, 0.70);   /* overlay link text   */

  /* ── Shadow opacity steps (box-shadow fills) ────────────────────── */
  --shadow-alpha-xs:  rgba(0, 0, 0, 0.07);   /* light shadow sm        */
  --shadow-alpha-sm:  rgba(0, 0, 0, 0.10);   /* light shadow lg        */
  --shadow-alpha-md:  rgba(0, 0, 0, 0.40);   /* dark shadow sm/md      */
  --shadow-alpha-lg:  rgba(0, 0, 0, 0.50);   /* dark shadow lg/xl      */

  /* ── Nav backdrop alpha steps ───────────────────────────────────── */
  --light-alpha-nav:     rgba(240, 244, 248, 0.92);  /* light nav bg    */
  --dark-alpha-nav:      rgba( 10,  15,  26, 0.92);  /* dark overlay nav*/
  --dark-alpha-nav-dark: rgba( 13,  17,  23, 0.92);  /* dark theme nav  */

  /* ── Accent alpha extensions ────────────────────────────────────── */
  /* Extends --color-accent-alpha-1 through -7 (already in section 9) */
  --color-accent-alpha-8:  rgba(61, 139, 212, 0.15);  /* active pill dark*/
  --color-accent-alpha-9:  rgba(61, 139, 212, 0.20);  /* eng-return glow */
  --color-accent-alpha-10: rgba(61, 139, 212, 0.30);  /* border / shadow */
  --color-accent-alpha-11: rgba(61, 139, 212, 0.35);  /* strong border   */

  /* ── Gradient primitives ────────────────────────────────────────── */
  --gradient-accent: linear-gradient(135deg, #3d8bd4, #2a72b8);

}


/* ═══════════════════════════════════════════════════════════════════
   11. FONT SIZE — FIXED SCALE PRIMITIVES
   Raw px values. Semantic aliases (--fs-eyebrow, --fs-nav-*, etc.)
   live in base-2.css. --fs-text-* utility aliases live here as
   the public scale interface used across site and demo layers.
════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Fixed px primitive scale ───────────────────────────────────── */
  --fs-p-3xs:      10px;    /* ultra-micro — rank nums, axis labels    */
  --fs-p-2xs:      11px;    /* micro — eyebrow labels, timestamps      */
  --fs-p-xs:       12px;    /* eyebrow — filter labels, sub-labels     */
  --fs-p-sm:       13px;    /* meta — table cells, pills, captions     */
  --fs-p-base:     14px;    /* body — card content, list items         */
  --fs-p-md:       15px;    /* elevated body — stat sub-labels         */
  --fs-p-lg:       16px;    /* section — panel names, section headers  */
  --fs-p-sub:      17px;    /* sub-title — between lg(15) and xl(18)  */
  --fs-p-xl:       18px;    /* title — card titles, modal headers      */
  --fs-p-2xl:      20px;    /* display — large section headers         */
  --fs-p-icon:     22px;    /* icon — between 2xl(20) and 3xl(23)     */
  --fs-p-3xl:      23px;    /* kpi — secondary KPI numbers            */
  --fs-p-4xl:      25px;    /* kpi-lg — primary KPI numbers           */
  --fs-p-5xl:      28px;    /* hero — hero display numbers            */
  --fs-p-nav-logo: 20px;    /* nav wordmark — semantic clarity alias  */

  /* ── Rem primitives — fluid/responsive body text ───────────────── */
  --fs-p-body-lg:    1.1rem;   /* tablet body text override           */
  --fs-p-body-md:    1.0rem;   /* mobile body text override           */
  --fs-p-body-prose: 1.25rem;  /* overlay body prose                  */

  /* ── Text scale aliases — public scale interface ────────────────── */
  /* Used in utility classes and component aliases in both            */
  /* base-2.css and demo-base-2.css.                                  */
  --fs-text-3xs:  var(--fs-p-3xs);     /*  9px */
  --fs-text-2xs:  var(--fs-p-2xs);     /* 10px */
  --fs-text-xs:   var(--fs-p-xs);      /* 11px */
  --fs-text-sm:   var(--fs-p-sm);      /* 12px */
  --fs-text-base: var(--fs-p-base);    /* 13px */
  --fs-text-md:   var(--fs-p-md);      /* 14px */
  --fs-text-lg:   var(--fs-p-lg);      /* 15px */
  --fs-text-sub:  var(--fs-p-sub);     /* 17px */
  --fs-text-xl:   var(--fs-p-xl);      /* 18px */
  --fs-text-2xl:  var(--fs-p-2xl);     /* 20px */
  --fs-text-icon: var(--fs-p-icon);    /* 22px */
  --fs-text-3xl:  var(--fs-p-3xl);     /* 23px */
  --fs-text-4xl:  var(--fs-p-4xl);     /* 25px */
  --fs-text-5xl:  var(--fs-p-5xl);     /* 28px */

}


/* ═══════════════════════════════════════════════════════════════════
   12. FONT SIZE — FLUID SCALE PRIMITIVES
   clamp() values for responsive typography. Semantic aliases
   (--fs-partners-h1, --fs-eng-hero, etc.) live in base-2.css.
════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Fluid clamp primitives ─────────────────────────────────────── */
  --fs-fluid-xs:   clamp(1rem,   5vw,   1.2rem);  /* compact label      */
  --fs-fluid-sm:   clamp(1.1rem, 2vw,   1.4rem);  /* poster body        */
  --fs-fluid-md:   clamp(1.3rem, 2.5vw, 1.8rem);  /* convergence hd     */
  --fs-fluid-lg:   clamp(1.4rem, 2.2vw, 1.9rem);  /* pillar value       */
  --fs-fluid-xl:   clamp(1.4rem, 2.5vw, 1.9rem);  /* docs welcome       */
  --fs-fluid-2xl:  clamp(1.5rem, 3.8vw, 3.2rem);  /* hero body lines    */
  --fs-fluid-3xl:  clamp(1.8rem, 3.5vw, 2.6rem);  /* callout headline   */
  --fs-fluid-4xl:  clamp(2rem,   4.5vw, 3.4rem);  /* page h1            */
  --fs-fluid-5xl:  clamp(2.6rem, 6.5vw, 5.6rem);  /* hero highlight     */

  /* ── Legacy fluid aliases — unique clamp values, no primitive match ─*/
  --fs-h1:      clamp(1.9rem, 4vw, 3rem);    /* page h1 — unique value  */
  --fs-h2:      clamp(1.7rem, 3vw, 2.5rem);  /* page h2 — unique value  */
  --fs-tagline: clamp(1.4rem, 2.8vw, 2rem);  /* serif pull-quote        */

}


/* ═══════════════════════════════════════════════════════════════════
   13. SITE TOKENS — LIGHT THEME (DEFAULT)
   All semantic aliases for site pages. These are the public token
   names used throughout base-2.css class rules and site.css.
   Referenced via var(--token-name) — never hard-coded in classes.
════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Color — Surface palette ────────────────────────────────────── */
  --color-bg:               var(--palette-bg-light);
  --color-surface:          var(--color-white);
  --color-navy:             var(--palette-navy);
  --color-text:             var(--palette-text-light);
  --color-muted:            var(--palette-muted-light);
  --color-accent:           var(--color-c1);
  --color-border:           var(--palette-border-light);
  --color-card-bg:          var(--palette-card-light);

  /* ── Color — Footer ─────────────────────────────────────────────── */
  --color-footer-bg:        var(--palette-navy);
  --color-footer-text:      var(--white-alpha-4);
  --color-foot-logo-text:   var(--color-white);

  /* ── Color — Overlay / dark page ────────────────────────────────── */
  --color-overlay-nav:         var(--dark-alpha-nav);
  --color-overlay-border:      var(--white-alpha-1);
  --color-overlay-text:        var(--white-alpha-5);
  --color-overlay-btn-bg:      var(--white-alpha-1);
  --color-overlay-btn-hover:   var(--white-alpha-2);
  --color-overlay-btn-border:  var(--white-alpha-2);
  --color-overlay-btn-text:    var(--white-alpha-6);
  --color-overlay-logo-dim:    var(--white-alpha-3);
  --color-enginuity-link-bg:   var(--gradient-accent);
  --color-enginuity-link-shadow: var(--accent-shadow-md);
  --color-gradient-btn:        var(--gradient-accent);
  --color-card-label-text:     var(--color-white);

  /* ── Color — Short semantic aliases ─────────────────────────────── */
  --bg:       var(--color-bg);
  --surface:  var(--color-surface);
  --navy:     var(--color-navy);
  --text:     var(--color-text);
  --muted:    var(--color-muted);
  --accent:   var(--color-accent);
  --border:   var(--color-border);
  --c1:       var(--color-c1);
  --c2:       var(--color-c2);
  --c3:       var(--color-c3);
  --c4:       var(--color-c4);

  /* ── Color — Accent alpha semantic aliases ───────────────────────── */
  --accent-dot:              var(--color-accent-alpha-1);  /* dot texture bg */
  --accent-hover:            var(--color-accent-alpha-2);  /* nav / subnav hover */
  --accent-hover-md:         var(--color-accent-alpha-3);  /* btn / hamburger hover */
  --accent-pill-bg:          var(--color-accent-alpha-4);  /* active pill bg */
  --accent-hover-dark:       var(--color-accent-alpha-5);  /* dark theme hover */
  --accent-shadow-sm:        var(--color-accent-alpha-6);  /* subtle glow rings */
  --accent-glow:             var(--color-accent-alpha-7);  /* card shadow glow */
  --accent-border:           var(--color-accent-alpha-11); /* nav CTA border */
  --accent-border-light:     var(--color-accent-alpha-10); /* link shadow base */
  --accent-shadow-md:        var(--color-accent-alpha-10); /* btn box-shadow */
  --accent-shadow-lg:        var(--color-accent-alpha-6);  /* btn hover glow */
  --accent-shadow-xl:        var(--color-accent-alpha-9);  /* eng-return glow */
  --accent-glow-ring:        var(--color-accent-alpha-5);  /* focus ring */
  --accent-pill-active:      var(--color-accent-alpha-4);  /* active pill */
  --accent-pill-active-dark: var(--color-accent-alpha-8);  /* dark active pill */

  /* ── Typography — Font families ─────────────────────────────────── */
  --font-sans:   'Inter', system-ui, sans-serif;
  --font-serif:  Georgia, 'Times New Roman', serif;
  --font-mono:   'Space Mono', monospace;

  /* ── Typography — Font size component aliases ────────────────────── */
  --fs-eyebrow:            var(--fs-p-xs);          /* 11px — eyebrow labels */
  --fs-nav-logo:           var(--fs-p-nav-logo);    /* 20px — nav wordmark */
  --fs-nav-link:           var(--fs-p-lg);          /* 15px — nav links */
  --fs-nav-cta:            var(--fs-p-lg);          /* 15px — nav CTA */
  --fs-nav-subnav:         var(--fs-p-base);        /* 13px — subnav items */
  --fs-nav-chevron:        var(--fs-p-xs);          /* 11px — chevron icon */
  --fs-sub:                var(--fs-p-lg);          /* 15px — hero subtitles */
  --fs-card-label:         var(--fs-p-xs);          /* 11px — card labels */
  --fs-card-cta:           var(--fs-p-sm);          /* 12px — card CTA */
  --fs-badge:              var(--fs-p-base);        /* 13px — badges */
  --fs-arch-tag:           var(--fs-p-base);        /* 13px — arch pill */
  --fs-arch-sub:           var(--fs-p-md);          /* 14px — arch subtitle */
  --fs-stat-val:           var(--fs-p-xl);          /* 18px — stat value */
  --fs-stat-lbl:           var(--fs-p-xs);          /* 11px — stat label */
  --fs-btn:                var(--fs-p-base);        /* 13px — btn label */
  --fs-meta:               var(--fs-p-base);        /* 13px — meta text */
  --fs-foot:               var(--fs-p-sm);          /* 12px — footer */
  --fs-overlay-logo:       var(--fs-p-lg);          /* 15px — overlay logo */
  --fs-overlay-slash:      var(--fs-p-base);        /* 13px — slash sep */
  --fs-overlay-body:       var(--fs-p-body-prose);  /* rem  — overlay prose */
  --fs-overlay-link:       var(--fs-p-base);        /* 13px — overlay link */
  --fs-body-lg:            var(--fs-p-body-lg);     /* 1.1rem — tablet body */
  --fs-body-md:            var(--fs-p-body-md);     /* 1.0rem — mobile body */
  --fs-partners-h1:        var(--fs-fluid-4xl);     /* partners h1 */
  --fs-convergence-hd:     var(--fs-fluid-md);      /* convergence heading */
  --fs-pillar-value:       var(--fs-fluid-lg);      /* pillar value */
  --fs-poster-text:        var(--fs-fluid-sm);      /* docs poster */
  --fs-poster-text-mobile: var(--fs-fluid-xs);      /* docs poster mobile */
  --fs-callout-headline:   var(--fs-fluid-3xl);     /* callout headline */
  --fs-docs-welcome:       var(--fs-fluid-xl);      /* docs welcome */
  --fs-eng-hero:           var(--fs-fluid-2xl);     /* eng hero lines */
  --fs-eng-hero-hl:        var(--fs-fluid-5xl);     /* eng hero highlight */
  --fs-about-h1:           var(--fs-fluid-4xl);     /* about h1 */
  --fs-about-hero-sub:     var(--fs-p-sub);         /* 17px — about sub */

  /* ── Border radius — semantic aliases ───────────────────────────── */
  --radius:         var(--radius-p-5xl);   /* 20px — default card/panel */
  --radius-sm:      var(--radius-p-xl);    /* 10px — smaller panels */
  --radius-pill:    var(--radius-p-pill);  /* 100px — fully rounded */
  --subnav-radius:  var(--radius-p-2xl);   /* 12px — subnav dropdown */

  /* ── Shadows — light theme ──────────────────────────────────────── */
  --shadow-sm:     0 2px 16px var(--shadow-alpha-xs);
  --shadow-md:     0 2px 16px var(--shadow-alpha-xs);
  --shadow-lg:     0 8px 24px var(--shadow-alpha-sm);
  --shadow-xl:     0 10px 36px var(--accent-glow);
  --shadow:        var(--shadow-sm);
  --shadow-card:   var(--shadow-xl);
  --shadow-nav:    var(--shadow-md);
  --shadow-subnav: var(--shadow-lg);

  /* ── Nav dimensions ─────────────────────────────────────────────── */
  --nav-height:        64px;
  --nav-padding-x:     52px;
  --nav-bg:            var(--light-alpha-nav);
  --subnav-min-width:  180px;
  --subnav-bg:         var(--color-white);
  --subnav-border:     var(--color-border);
  --subnav-item-hover: var(--accent-hover);

  /* ── Z-index scale ──────────────────────────────────────────────── */
  --z-base:        0;
  --z-raised:      1;
  --z-float:      10;
  --z-sticky:    198;
  --z-overlay-bg: 199;
  --z-nav:        200;
  --z-subnav:     201;
  --z-drawer:     300;
  --z-modal:      500;

}


/* ═══════════════════════════════════════════════════════════════════
   14. SITE TOKENS — DARK THEME OVERRIDES
   Activated when html[data-theme="dark"]. Overrides the light-theme
   values above. Only tokens that change between themes are listed.
════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {

  /* ── Color overrides ────────────────────────────────────────────── */
  --color-bg:       var(--palette-bg-dark);
  --color-surface:  var(--palette-surface-dark);
  --color-navy:     var(--palette-navy-light);
  --color-text:     var(--palette-text-dark);
  --color-muted:    var(--palette-muted-dark);
  --color-border:   var(--white-alpha-1);
  --color-card-bg:  var(--palette-card-dark);

  /* ── Nav overrides ──────────────────────────────────────────────── */
  --nav-bg:            var(--dark-alpha-nav-dark);
  --subnav-bg:         var(--palette-surface-dark);
  --subnav-border:     var(--white-alpha-1);
  --subnav-item-hover: var(--accent-hover-dark);

  /* ── Shadow overrides — primitives only, aliases auto-resolve ────── */
  --shadow-sm:  0 2px 16px var(--shadow-alpha-md);
  --shadow-md:  0 2px 16px var(--shadow-alpha-md);
  --shadow-lg:  0 8px 32px var(--shadow-alpha-lg);
  --shadow-xl:  0 10px 36px var(--shadow-alpha-lg);

}


/* ═══════════════════════════════════════════════════════════════════
   15. SITE TOKENS — RESPONSIVE OVERRIDES
   Token values that change at breakpoints. Kept here so all token
   declarations live in one file regardless of media context.
════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  :root {
    --nav-padding-x: 28px;   /* tablet — compressed nav padding */
  }
}

@media (max-width: 600px) {
  :root {
    --nav-padding-x: 20px;   /* mobile — minimal nav padding */
  }
}


/* ═══════════════════════════════════════════════════════════════════
   16. ADDITIONS TO SHARED SCALES
   New tokens identified during site.css and demo audit.
   Added here rather than retrofitting earlier sections.
════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Line Height — additional step ──────────────────────────────── */
  /* --leading-normal fills the gap between snug(1.2) and base(1.3)   */
  /* Found in site.css ×2 — not covered by the original 8-step scale  */
  --leading-normal: 1.25;

  /* ── Shadow alpha — dark overlay extensions ─────────────────────── */
  /* Heavy dark shadows used in site.css enginuity video/image layers  */
  --shadow-alpha-dark-xl:  rgba(0, 0, 0, 0.60);  /* video hero shadow  */
  --shadow-alpha-dark-2xl: rgba(0, 0, 0, 0.70);  /* image stack shadow */

  /* ── Z-index — behind-layer ─────────────────────────────────────── */
  /* Negative z-index for demo hero background layers                  */
  --di-z-behind:   -1;   /* behind — hero bg, pseudo overlays         */
  --di-z-overlay:  80;   /* demo overlay panels — below sticky (90)   */
  --di-z-overlay2: 90;   /* demo topbar / header overlay              */

  /* ── Demo outcome colors — di-outcome-* component tokens ───────── */
  /* Used in .di-outcome--* variant classes in demo-base-2.css.       */
  /* Light pastel fills + border + label text per signal color.       */
  --di-outcome-positive-bg:     #F0FDF4;   /* green tint surface       */
  --di-outcome-positive-border: #86EFAC;   /* green border             */
  --di-outcome-positive-text:   #14532D;   /* dark green label         */
  --di-outcome-negative-bg:     #FEF2F2;   /* red tint surface         */
  --di-outcome-negative-border: #FCA5A5;   /* red border               */
  --di-outcome-negative-text:   #7F1D1D;   /* dark red label           */
  --di-outcome-blue-bg:         #F0F9FF;   /* sky blue surface         */
  --di-outcome-blue-border:     #7DD3FC;   /* sky blue border          */
  --di-outcome-blue-text:       #0369A1;   /* dark blue label          */
  --di-outcome-purple-bg:       #FDF4FF;   /* purple tint surface      */
  --di-outcome-purple-border:   #E9D5FF;   /* purple border            */
  --di-outcome-purple-text:     #581C87;   /* dark purple label        */

  /* ── Responsive breakpoints ─────────────────────────────────────── */
  /* Use these pixel values literally in @media (max-width: _).
   * CSS vars don't work inside @media(); tokens document the convention.
   * See claude/responsive-breakpoints.md for usage.                     */
  --bp-sm:  480px;   /* phone                                            */
  --bp-md:  768px;   /* tablet / iPad portrait                           */
  --bp-lg: 1024px;   /* laptop / iPad landscape                          */

}