/* ============================================================================
   EVL design system, TOKENS + BASE
   Escape Velocity Labs Group Limited
   Source of truth: brand-assets/EVL Brand Kit.pdf + evl-brand-kit-2026.fig
   Brand facts ratified 2026-06-09 (palette, type, theme, radius, spacing, icons).
   ----------------------------------------------------------------------------
   This is the single token primitive for /apply-evl-brand. It contains the
   immutable brand scale, the semantic layer for BOTH themes, a thin base
   element layer, AND the component CSS (nav, cards, pills, tables, footer...).
   The component layer ships NOW (section 9), built entirely on var(--evl-*)
   with no raw hex; flat surfaces, hairline borders, near-square radii.

   Layers, in order:
     1. Brand scale    , raw, mode-independent brand colours. Never change.
     2. Semantic layer , what a layout consumes (bg, fg, accent, status...).
                          Flips between themes; default :root is DARK.
     3. Type tokens    , families, 8-step scale, tracking, weights, leading.
     4. Spacing        , 8px base, fixed scale.
     5. Radii          , near-square, plus pill (status/chips only).
     6. Elevation      , flat default + a minimal shadow scale.
     7. Motion         , one canonical curve + duration tokens.
     8. Base elements  , html/body, headings, links, utility text, a11y.
     9. Components     , nav, headers, KPI strip, cards, buttons, pills,
                          chips, address, matrix table, callouts, footer,
                          theme toggle. All on semantic tokens, both themes.

   THEME MECHANISM (ratified): data-theme="light|dark" on <html>.
     <html>                      -> DARK   (signature: Ignition Violet on black)
     <html data-theme="light">   -> LIGHT
     <html data-theme="dark">    -> DARK   (explicit)
   A bare :root defaults to DARK. Per-surface defaults the system expects:
     documents / print -> LIGHT
     decks             -> DARK
     marketing site    -> DARK (documented exception to the kit's light default)
   Set the attribute on <html> per artifact; the system never auto-switches.

   Self-host IBM Plex Sans, Inter, IBM Plex Mono for offline decks/print.
   Google Fonts is the CDN fallback only. Figtree (in EVL's social-graphics CSS)
   is NON-STANDARD; IBM Plex Sans is the canonical display face.

   Many values below are v0.1 PROPOSALS where the kit has no authoritative
   source. Each is flagged inline as "(v0.1 proposal: needs ratification)".
   ========================================================================== */


/* ============================================================================
   1. BRAND SCALE, immutable. Locked sRGB hexes + the signature gradient.
      Never recolour, never re-derive. Cite these exact values.
   ========================================================================== */
:root{
  /* Primary / signature */
  --evl-ignition-violet: #440BFF; /* signature/primary. The single FLAT primary in BOTH themes. */
  --evl-space-blue-deep:  #25009F; /* depth/structure. Dark end of the gradient. */
  --evl-space-blue:       #4480FF; /* cool accent; hover/motion. Light end of the gradient. */

  /* Secondary, sparing */
  --evl-white-hot:    #D9D9D9; /* "core flame" neutral; linework; wordmark on dark. */
  --evl-solar-yellow: #EFC34D; /* highlight, sparing only. */
  --evl-trust-orange: #E0602F; /* CTA/accent, sparing only. */
  --evl-crimson-burn: #AB2B22; /* alert/warning only. */

  /* Grounds + ink (kit ground rules; #1A1A1A near-black is a kit working ink) */
  --evl-black: #000000; /* dark-mode ground */
  --evl-white: #FFFFFF; /* light-mode ground */
  --evl-ink:   #1A1A1A; /* near-black light-mode type */

  /* Signature mark gradient (blue -> violet -> deep). Use ONCE per view, max.
     Never a section-wide wash. */
  --evl-gradient: linear-gradient(135deg,
      var(--evl-space-blue)      0%,
      var(--evl-ignition-violet) 52%,
      var(--evl-space-blue-deep) 100%);


  /* ==========================================================================
     3. TYPE TOKENS  (mode-independent, same families/scale in both themes)
        Kit fixes the families + display tracking + weights. The 8-step scale,
        the in-between sizes, and the leading values are the skill's defaults.
     ======================================================================== */

  /* Families. First name is the self-hosted/CDN face; rest are offline fallbacks. */
  --evl-font-display: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;        /* display / headline / sub */
  --evl-font-body:    "Inter", "Segoe UI", Helvetica, Arial, sans-serif;                /* body / UI / labels / metadata + long-form (no serif family) */
  --evl-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;       /* code, wallet addresses, IDs, tabular figures */

  /* Tracking + weights (kit). Display is set tight; body sits at default. */
  --evl-tracking-display: -0.03em; /* kit: -3% on display / headline / sub */
  --evl-tracking-body:    0;
  --evl-weight-display:   600;     /* IBM Plex Sans SemiBold */
  --evl-weight-body:      400;     /* Inter Regular */

  /* 8-step type scale (px-equivalent in comments). Preserved from the kit sheet. */
  --evl-text-xs:      0.75rem;  /* 12px, captions, eyebrows, fine print */
  --evl-text-sm:      0.875rem; /* 14px, meta, labels */
  --evl-text-base:    1rem;     /* 16px, body */
  --evl-text-lg:      1.25rem;  /* 20px, lead / sub-headline */
  --evl-text-xl:      1.75rem;  /* 28px, H3 */
  --evl-text-2xl:     2.5rem;   /* 40px, H2 */
  --evl-text-3xl:     3.5rem;   /* 56px, H1 */
  --evl-text-display: clamp(3rem, 6vw, 5.5rem); /* hero, fluid 48px..88px */

  /* Line-heights. Tight for display, snug for sub-heads, generous for reading. */
  --evl-leading-tight: 1.05;
  --evl-leading-snug:  1.25;
  --evl-leading-body:  1.6;


  /* ==========================================================================
     4. SPACING , 8px base unit, fixed scale, NO in-between values.
        --evl-space-1 == one base unit. (v0.1 step-naming proposal, the kit
        ratifies the 8px base + "fixed scale, no in-between", not these labels.)
     ======================================================================== */
  --evl-space-0:   0;     /*  0px */
  --evl-space-1:   8px;   /*  8px, base unit */
  --evl-space-2:   16px;  /* 16px */
  --evl-space-3:   24px;  /* 24px */
  --evl-space-4:   32px;  /* 32px */
  --evl-space-5:   40px;  /* 40px */
  --evl-space-6:   48px;  /* 48px */
  --evl-space-8:   64px;  /* 64px */
  --evl-space-10:  80px;  /* 80px */
  --evl-space-12:  96px;  /* 96px */
  --evl-space-16: 128px;  /* 128px, section gaps on large surfaces */


  /* ==========================================================================
     5. RADII , restrained, near-square (ratified). Pill is status/chips only.
     ======================================================================== */
  --evl-radius-sm:  2px;   /* tightest inset (v0.1 proposal: needs ratification) */
  --evl-radius:     4px;   /* default corner (kit) */
  --evl-radius-md:  6px;   /* buttons land in the ~4-8px band (v0.1 proposal: needs ratification) */
  --evl-radius-lg:  8px;   /* cards / larger panels (kit allows up to ~8px) */
  --evl-radius-pill: 999px;/* status pills + chips ONLY (kit). Never on buttons/cards. */
  --evl-hairline:   1px;   /* 1px rule weight */


  /* ==========================================================================
     6. ELEVATION , flat is the default. Use shadows for documents/UI only,
        never as decoration. Minimal scale. (v0.1 proposal: needs ratification;
        the kit ratifies "restrained/flat", not these exact shadow values.)
     ======================================================================== */
  --evl-shadow-0: none;                                /* flat default */
  --evl-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.20);       /* hairline lift: inputs, hover */
  --evl-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.28);      /* card / popover */
  --evl-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.36);     /* modal / overlay */


  /* ==========================================================================
     7. MOTION , one canonical easing curve + duration tokens.
        (v0.1 proposal: needs ratification; the kit names motion as v0.1-open.)
        Space Blue (#4480FF) is the kit's "hover/motion" hue; see --evl-accent-hover.
     ======================================================================== */
  --evl-ease:     cubic-bezier(0.2, 0, 0, 1); /* canonical: quick out, soft settle */
  --evl-dur-fast: 120ms;  /* micro: hover, focus */
  --evl-dur-base: 200ms;  /* standard: theme/colour transitions */
  --evl-dur-slow: 320ms;  /* deliberate: overlays, larger moves */
}


/* ============================================================================
   2. SEMANTIC LAYER
      Bare :root defaults to DARK (the signature). Both themes are then defined
      explicitly so data-theme="dark" and data-theme="light" are unambiguous.

      Body-text contrast (WCAG 2.2 AA needs >= 4.5:1 normal, >= 3:1 large/UI).
      Ratios below are computed (alpha steps composited over the solid ground):
        DARK : fg  #D9D9D9 on #000000        ~= 14.9:1   PASS (AAA)
        LIGHT: fg  #1A1A1A on #FFFFFF         ~= 17.4:1   PASS (AAA)
        fg-muted  DARK ~= 7.6:1  LIGHT ~= 7.3:1           PASS (AA body)
        fg-subtle DARK ~= 5.5:1  LIGHT ~= 4.9:1           PASS (AA body)
      The fg-subtle step was raised from its old alpha so the .sub utility
      (14px normal weight) clears 4.5:1 as real body text in BOTH themes.
      The fg-faint step is intentionally low-contrast (~2.4:1): decorative /
      large-text only, never body copy. Flagged at its definition.

      Links: the base a{} rule reads --evl-link, set per theme. Flat Ignition
      Violet (#440BFF) is only ~2.7:1 on black, so it CANNOT be the dark link
      colour. Dark uses Space Blue (#4480FF, ~5.8:1 on black); light keeps
      flat violet (~7.7:1 on white). The flat-primary brand rule still holds
      for fills/buttons in both themes; this only governs inline text links.

      The grey ramp runs between White-hot #D9D9D9 and Black #000000, the two
      neutral anchors the kit gives us. All intermediate greys are v0.1.
   ========================================================================== */

/* ---- DARK (bare :root default) ------------------------------------------- */
:root{
  color-scheme: dark;

  /* Grounds + surfaces. Pure black ground; surfaces barely lift off it. */
  --evl-bg:          var(--evl-black);   /* page ground */
  --evl-bg-alt:      #0B0B0C;            /* alternating band / subtle zone (v0.1 proposal: needs ratification) */
  --evl-surface:     #121214;            /* card / inset surface (v0.1 proposal: needs ratification) */
  --evl-surface-alt: #1A1A1D;            /* raised surface / popover (v0.1 proposal: needs ratification) */

  /* Foreground ramp. fg is White-hot per the kit; the rest step down in alpha. */
  --evl-fg:        var(--evl-white-hot);          /* body type, #D9D9D9 on black, ~14.9:1 AAA */
  --evl-fg-strong: var(--evl-white);              /* max-contrast headline, ~21:1 */
  --evl-fg-muted:  rgba(217, 217, 217, 0.72);     /* secondary text, ~7.6:1, AA body (v0.1 proposal) */
  --evl-fg-subtle: rgba(217, 217, 217, 0.60);     /* tertiary / captions, ~5.5:1, AA body (raised from 0.52 to clear 4.5:1) */
  --evl-fg-faint:  rgba(217, 217, 217, 0.34);     /* DECORATIVE / large-text only, ~2.4:1, below AA for body (v0.1 proposal) */

  /* Neutral grey ramp, White-hot -> Black. Linework, fills, dividers.
     (v0.1 proposal: needs ratification. Anchors #D9D9D9 and #000000 are kit;
      the 4 mid-greys are proposed evenly down the channel.) */
  --evl-grey-100: #D9D9D9; /* = White-hot (anchor) */
  --evl-grey-80:  #ABABAB; /* (v0.1 proposal) */
  --evl-grey-60:  #7D7D7D; /* (v0.1 proposal) */
  --evl-grey-40:  #4F4F4F; /* (v0.1 proposal) */
  --evl-grey-20:  #2B2B2B; /* (v0.1 proposal) */
  --evl-grey-0:   #000000; /* = Black (anchor) */

  /* Accent / primary. Ignition Violet is FLAT in both themes (kit). */
  --evl-accent:        var(--evl-ignition-violet); /* alias: primary brand action */
  --evl-primary:       var(--evl-ignition-violet); /* #440BFF, flat in both themes */
  --evl-primary-hover: var(--evl-space-blue);      /* kit: Space Blue is the hover/motion hue */
  --evl-primary-deep:  var(--evl-space-blue-deep); /* pressed / deep structure */
  --evl-accent-hover:  var(--evl-space-blue);      /* alias of primary-hover */
  --evl-on-primary:    var(--evl-white);           /* text/icon on a primary fill, ~7.7:1 on #440BFF, AA */
  --evl-on-accent:     var(--evl-white);           /* alias */

  /* Inline text links. Flat violet is ~2.7:1 on black (fails AA), so dark
     links use Space Blue (#4480FF, ~5.8:1 on black). Fills/buttons stay flat
     violet per the kit; this token governs text links only. */
  --evl-link:          var(--evl-space-blue);      /* dark link colour, ~5.8:1 on black, AA */
  --evl-link-hover:    var(--evl-white-hot);       /* brightens to White-hot on hover, ~14.9:1 */

  /* Borders / hairlines. Low-alpha White-hot reads as linework on black. */
  --evl-line:          rgba(217, 217, 217, 0.16); /* default hairline / border */
  --evl-line-strong:   rgba(217, 217, 217, 0.28); /* emphasised border (v0.1 proposal) */

  /* Focus ring. Space Blue reads clearly on dark and never clashes with violet. */
  --evl-focus-ring:    var(--evl-space-blue);     /* (v0.1 proposal: needs ratification) */

  /* Status. Trust Orange = CTA, Solar Yellow = warn, Crimson Burn = alert (kit). */
  --evl-cta:    var(--evl-trust-orange);
  --evl-warn:   var(--evl-solar-yellow);
  --evl-alert:  var(--evl-crimson-burn);

  /* Status extensions (v0.1). The kit has no positive/"good" hue, so success
     is a forest green that sits OUTSIDE the brand set. Tint fills are low-alpha
     washes of each status hue for pill/callout backgrounds, on DARK they wash
     toward the black ground at ~0.16 alpha. */
  --evl-success:      #1F7A4B;                       /* forest green, outside the brand set (v0.1 proposal: needs ratification) */
  --evl-cta-tint:     rgba(224, 96, 47, 0.16);       /* Trust Orange wash (v0.1 proposal: needs ratification) */
  --evl-warn-tint:    rgba(239, 195, 77, 0.16);      /* Solar Yellow wash (v0.1 proposal: needs ratification) */
  --evl-warn-ink:     var(--evl-warn);                /* caution label text: yellow reads on the dark ground (EVL-313) */
  --evl-alert-tint:   rgba(171, 43, 34, 0.18);       /* Crimson Burn wash (v0.1 proposal: needs ratification) */
  --evl-success-tint: rgba(31, 122, 75, 0.18);       /* forest-green wash (v0.1 proposal: needs ratification) */
}

/* ---- DARK (explicit) ------------------------------------------------------
   Mirror of the bare :root above so data-theme="dark" is self-contained and
   un-ambiguous when set against a light per-surface default. ------------------ */
:root[data-theme="dark"]{
  color-scheme: dark;

  --evl-bg:          var(--evl-black);
  --evl-bg-alt:      #0B0B0C;
  --evl-surface:     #121214;
  --evl-surface-alt: #1A1A1D;

  --evl-fg:        var(--evl-white-hot);
  --evl-fg-strong: var(--evl-white);
  --evl-fg-muted:  rgba(217, 217, 217, 0.72);
  --evl-fg-subtle: rgba(217, 217, 217, 0.60);
  --evl-fg-faint:  rgba(217, 217, 217, 0.34);

  --evl-grey-100: #D9D9D9;
  --evl-grey-80:  #ABABAB;
  --evl-grey-60:  #7D7D7D;
  --evl-grey-40:  #4F4F4F;
  --evl-grey-20:  #2B2B2B;
  --evl-grey-0:   #000000;

  --evl-accent:        var(--evl-ignition-violet);
  --evl-primary:       var(--evl-ignition-violet);
  --evl-primary-hover: var(--evl-space-blue);
  --evl-primary-deep:  var(--evl-space-blue-deep);
  --evl-accent-hover:  var(--evl-space-blue);
  --evl-on-primary:    var(--evl-white);
  --evl-on-accent:     var(--evl-white);

  --evl-link:          var(--evl-space-blue);
  --evl-link-hover:    var(--evl-white-hot);

  --evl-line:        rgba(217, 217, 217, 0.16);
  --evl-line-strong: rgba(217, 217, 217, 0.28);

  --evl-focus-ring:  var(--evl-space-blue);

  --evl-cta:    var(--evl-trust-orange);
  --evl-warn:   var(--evl-solar-yellow);
  --evl-alert:  var(--evl-crimson-burn);

  /* Status extensions (v0.1), mirror of the bare :root dark block above. */
  --evl-success:      #1F7A4B;                       /* forest green, outside the brand set (v0.1 proposal: needs ratification) */
  --evl-cta-tint:     rgba(224, 96, 47, 0.16);       /* Trust Orange wash (v0.1 proposal: needs ratification) */
  --evl-warn-tint:    rgba(239, 195, 77, 0.16);      /* Solar Yellow wash (v0.1 proposal: needs ratification) */
  --evl-warn-ink:     var(--evl-warn);                /* caution label text: yellow reads on the dark ground (EVL-313) */
  --evl-alert-tint:   rgba(171, 43, 34, 0.18);       /* Crimson Burn wash (v0.1 proposal: needs ratification) */
  --evl-success-tint: rgba(31, 122, 75, 0.18);       /* forest-green wash (v0.1 proposal: needs ratification) */
}

/* ---- LIGHT (explicit) -----------------------------------------------------
   Documents/print default here. White / White-hot grounds, near-black ink.
   Ignition Violet stays flat as the primary (kit). ------------------------- */
:root[data-theme="light"]{
  color-scheme: light;

  --evl-bg:          var(--evl-white);            /* white ground */
  --evl-bg-alt:      #F4F4F4;                      /* faint band, off-white (v0.1 proposal) */
  --evl-surface:     var(--evl-white);            /* card surface */
  --evl-surface-alt: var(--evl-white-hot);        /* raised band = White-hot #D9D9D9 (kit neutral) */

  /* Foreground ramp on white. Near-black ink, stepping down in alpha. */
  --evl-fg:        var(--evl-ink);                /* body type, #1A1A1A on white, ~17.4:1 AAA */
  --evl-fg-strong: var(--evl-black);              /* max-contrast headline, ~21:1 */
  --evl-fg-muted:  rgba(26, 26, 26, 0.74);        /* secondary text, ~7.3:1, AA body (v0.1 proposal) */
  --evl-fg-subtle: rgba(26, 26, 26, 0.62);        /* tertiary / captions, ~4.9:1, AA body (raised from 0.56 to clear 4.5:1) */
  --evl-fg-faint:  rgba(26, 26, 26, 0.40);        /* DECORATIVE / large-text only, ~2.5:1, below AA for body (v0.1 proposal) */

  /* Neutral grey ramp on light. Same anchors (#D9D9D9 / #000000); the mid
     steps here run lighter so linework stays subtle on white. (v0.1 proposal) */
  --evl-grey-100: #000000; /* = Black (anchor), darkest linework */
  --evl-grey-80:  #4F4F4F; /* (v0.1 proposal) */
  --evl-grey-60:  #7D7D7D; /* (v0.1 proposal) */
  --evl-grey-40:  #B0B0B0; /* (v0.1 proposal) */
  --evl-grey-20:  #D9D9D9; /* = White-hot (anchor), lightest fill */
  --evl-grey-0:   #FFFFFF; /* = White */

  --evl-accent:        var(--evl-ignition-violet); /* flat #440BFF in both themes (kit) */
  --evl-primary:       var(--evl-ignition-violet);
  --evl-primary-hover: var(--evl-space-blue);
  --evl-primary-deep:  var(--evl-space-blue-deep);
  --evl-accent-hover:  var(--evl-space-blue);
  --evl-on-primary:    var(--evl-white);           /* white text on violet fill, ~7.7:1, AA */
  --evl-on-accent:     var(--evl-white);

  /* Inline text links. Flat violet is ~7.7:1 on white (AA), so light links
     keep the signature violet; hover deepens to Space Blue deep. */
  --evl-link:          var(--evl-ignition-violet); /* light link colour, ~7.7:1 on white, AA */
  --evl-link-hover:    var(--evl-space-blue-deep);  /* deepens on hover, ~13.3:1 */

  --evl-line:        rgba(26, 26, 26, 0.14);       /* default hairline / border */
  --evl-line-strong: rgba(26, 26, 26, 0.24);       /* emphasised border (v0.1 proposal) */

  /* Deep Space Blue reads with more contrast than #4480FF on white. */
  --evl-focus-ring:  var(--evl-space-blue-deep);   /* ~13.3:1 on white (v0.1 proposal: needs ratification) */

  --evl-cta:    var(--evl-trust-orange);
  --evl-warn:   var(--evl-solar-yellow);
  --evl-alert:  var(--evl-crimson-burn);

  /* Status extensions (v0.1). Same forest green; tint fills here wash toward
     the WHITE ground at a lower alpha (~0.10) so dark status ink stays legible
     on top. Consistent with the dark blocks' structure, retuned for the ground. */
  --evl-success:      #1F7A4B;                       /* forest green, outside the brand set (v0.1 proposal: needs ratification) */
  --evl-cta-tint:     rgba(224, 96, 47, 0.10);       /* Trust Orange wash on white (v0.1 proposal: needs ratification) */
  --evl-warn-tint:    rgba(239, 195, 77, 0.18);      /* Solar Yellow wash on white (v0.1 proposal: needs ratification) */
  --evl-warn-ink:     var(--evl-fg);                  /* caution label text: Solar Yellow is 1.67:1 on white, so the word takes body ink and the dot and wash carry the hue (EVL-313) */
  --evl-alert-tint:   rgba(171, 43, 34, 0.10);       /* Crimson Burn wash on white (v0.1 proposal: needs ratification) */
  --evl-success-tint: rgba(31, 122, 75, 0.10);       /* forest-green wash on white (v0.1 proposal: needs ratification) */
}


/* ============================================================================
   8. BASE ELEMENTS , thin, opt-in-by-default page styling. No component CSS.
      Sets html/body to the active theme, headings in the display face, links
      in accent, and a small set of utility text classes + a11y primitives.
   ========================================================================== */

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  background: var(--evl-bg);
  color: var(--evl-fg);
  font-family: var(--evl-font-body);
  font-weight: var(--evl-weight-body);
  font-size: var(--evl-text-base);
  line-height: var(--evl-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--evl-dur-base) var(--evl-ease),
              color var(--evl-dur-base) var(--evl-ease);
}

/* Headings: display face, kit tracking, tight leading, max-contrast ink. */
h1, h2, h3, h4, h5, h6{
  font-family: var(--evl-font-display);
  font-weight: var(--evl-weight-display);
  letter-spacing: var(--evl-tracking-display);
  line-height: var(--evl-leading-tight);
  color: var(--evl-fg-strong);
  margin: 0 0 var(--evl-space-2);
}
h1{ font-size: var(--evl-text-3xl); }  /* 56 */
h2{ font-size: var(--evl-text-2xl); }  /* 40 */
h3{ font-size: var(--evl-text-xl); line-height: var(--evl-leading-snug); }  /* 28 */
h4{ font-size: var(--evl-text-lg); line-height: var(--evl-leading-snug); }  /* 20 */
h5{ font-size: var(--evl-text-base); }
h6{ font-size: var(--evl-text-sm); }

p{ margin: 0 0 var(--evl-space-2); max-width: 72ch; }

/* Links read --evl-link, set per theme so contrast holds: flat violet on
   light (~7.7:1), Space Blue on dark (~5.8:1) since flat violet fails on black.
   Underline on hover, not at rest. */
a{
  color: var(--evl-link);
  text-decoration: none;
  transition: color var(--evl-dur-fast) var(--evl-ease);
}
a:hover{ color: var(--evl-link-hover); text-decoration: underline; }

/* ---- Utility text classes ------------------------------------------------ */

/* Eyebrow: small all-caps label above a heading. Display face, wide tracking. */
.eyebrow{
  font-family: var(--evl-font-display);
  font-weight: var(--evl-weight-display);
  font-size: var(--evl-text-xs);
  letter-spacing: 0.16em;            /* wide positive tracking overrides the display -3% */
  text-transform: uppercase;
  color: var(--evl-fg-subtle);
  margin: 0 0 var(--evl-space-2);
}

/* Sub: muted supporting line under a heading. */
.sub{
  color: var(--evl-fg-subtle);
  font-size: var(--evl-text-sm);
  max-width: 70ch;
}

/* Lede: the standfirst paragraph. Larger body, full-contrast fg. */
.lede{
  font-size: var(--evl-text-lg);
  line-height: var(--evl-leading-snug);
  color: var(--evl-fg);
  max-width: 64ch;
  margin: var(--evl-space-1) 0 var(--evl-space-3);
}

/* Numerals: tabular figures for aligned columns of numbers. */
.num{ font-variant-numeric: tabular-nums; }

/* Mono / address: IBM Plex Mono for code, wallet addresses, IDs. */
.mono, .addr{
  font-family: var(--evl-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;                 /* mono never carries display tracking */
}

/* Signature gradient as text fill. Use ONCE per view, a hero word at most. */
.evl-gradient-text{
  background: var(--evl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hairline rule. */
.evl-rule{ border: 0; border-top: var(--evl-hairline) solid var(--evl-line); }

/* ---- Accessibility primitives -------------------------------------------- */

/* Focus ring: visible, offset, theme-aware. Keyboard users only. */
:focus-visible{
  outline: 2px solid var(--evl-focus-ring);
  outline-offset: 2px;
  border-radius: var(--evl-radius-sm);
}

/* Honour reduced-motion: kill transitions/animations, keep everything legible. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================================
   9. COMPONENTS , ships NOW. Every property reads var(--evl-*); no raw hex.
      House style: flat surfaces, hairline (--evl-line) borders, near-square
      radii (--evl-radius* in the 4-8px band). Pill radius is reserved for
      status pills + chips ONLY. Buttons NEVER take a pill radius. Hover uses
      --evl-primary-hover, press uses --evl-primary-deep, and :focus-visible
      inherits the global ring from the base layer (section 8), components do
      NOT redefine outline. prefers-reduced-motion is handled globally; the
      transitions below are simply neutralised by that rule.

      Layout containers consume semantic tokens only, so each component flips
      correctly under data-theme="light|dark" with no per-component overrides.
   ========================================================================== */

/* Optional page container. Width + gutters only; no colour of its own. */
.evl-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--evl-space-3) var(--evl-space-5) var(--evl-space-8);
}
/* In-page anchor offset so jumps clear the sticky nav (single ~72px mechanism). */
.evl-pagehead[id], section[id]{ scroll-margin-top: 72px; }


/* ---- Top nav (.evl-nav), flat, hairline underline, sticky, theme-aware logo */
.evl-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--evl-space-3);
  padding: var(--evl-space-2) 0;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--evl-bg);
  border-bottom: var(--evl-hairline) solid var(--evl-line);
}
.evl-nav__left{ display: flex; align-items: center; gap: var(--evl-space-3); }
/* Logo swap: the dark wordmark shows on dark themes, the light one on light.
   Markup carries both images; CSS reveals the correct one per data-theme.
   The EVL logomark is a brand mark, never a UI icon. */
.evl-nav__logo{ height: 36px; width: auto; display: block; }
.evl-nav__logo--dark{ display: block; }
.evl-nav__logo--light{ display: none; }
:root[data-theme="light"] .evl-nav__logo--dark{ display: none; }
:root[data-theme="light"] .evl-nav__logo--light{ display: block; }
.evl-nav__links{ display: flex; gap: var(--evl-space-1); }
.evl-nav__links a{
  font-family: var(--evl-font-body);
  font-size: var(--evl-text-sm);
  font-weight: var(--evl-weight-display);
  color: var(--evl-fg-subtle);
  padding: var(--evl-space-1) var(--evl-space-2);
  border-radius: var(--evl-radius);
  transition: background var(--evl-dur-fast) var(--evl-ease),
              color var(--evl-dur-fast) var(--evl-ease);
}
.evl-nav__links a:hover{ background: var(--evl-bg-alt); color: var(--evl-fg); text-decoration: none; }
.evl-nav__links a[aria-current="page"]{
  background: var(--evl-surface-alt);
  color: var(--evl-fg-strong);
}

/* Nav reflow, so a phone never scrolls the page sideways. One row cannot hold
   the lockup, the links, and the toggle at 390px: the kit's own three-link nav
   needs about 493px of track, so the toggle landed 84px past the right edge and
   took the page with it. Two rules do the work.

   First, wrapping at all three levels. It engages only when the nav runs out of
   room, so a wide screen keeps the single row it has today, and no breakpoint
   has to guess how many links a page carries. The toggle takes an auto left
   margin so it stays right-aligned on whichever row it lands.
   Ratified 2026-10-08 (EVL-313): keep the fold; revisit with a menu button
   once a nav carries more than about five links. */
.evl-nav{ flex-wrap: wrap; row-gap: var(--evl-space-1); }
.evl-nav__left{ flex-wrap: wrap; row-gap: var(--evl-space-1); min-width: 0; }
.evl-nav__links{ flex-wrap: wrap; row-gap: var(--evl-space-1); min-width: 0; }
.evl-nav .evl-theme-toggle{ margin-left: auto; }

/* Second, the phone layout. Wrapping alone folds the nav into three rows,
   because .evl-nav__left claims a whole row before the toggle can share it.
   Dropping that box with display:contents lets its children order themselves
   against the toggle: lockup and toggle on the first row, links on the second.
   The div carries no semantics, so removing its box removes nothing.
   (v0.1 proposal: needs ratification) */
@media (max-width: 700px){
  .evl-nav__left{ display: contents; }
  .evl-nav__logo{ order: 1; }
  .evl-nav .evl-theme-toggle{ order: 2; }
  .evl-nav__links{ order: 3; flex: 1 0 100%; }
  /* The folded nav is taller than one row, so in-page anchors need a deeper
     offset or a jump lands underneath it. (v0.1 proposal: needs ratification) */
  .evl-pagehead[id], section[id]{ scroll-margin-top: 120px; }
}


/* ---- Page head + .eyebrow-led section header (.eyebrow utility already exists) */
.evl-pagehead{ padding: var(--evl-space-3) 0 var(--evl-space-1); }
.evl-section{ margin-top: var(--evl-space-4); }
/* Section header: small numeral/eyebrow + title on one baseline-aligned row. */
.evl-sec-head{
  display: flex;
  align-items: baseline;
  gap: var(--evl-space-2);
  margin-bottom: var(--evl-space-2);
}
.evl-sec-head__n{
  font-family: var(--evl-font-mono);
  font-size: var(--evl-text-sm);
  color: var(--evl-accent);
}


/* ---- Hero KPI strip, one lead metric, then a hairline strip of secondaries.
   Never equal-weight cards: the lead reads big, the strip reads quiet. */
.evl-kpi{ display: flex; flex-direction: column; gap: var(--evl-space-1); }
.evl-kpi__label{
  font-family: var(--evl-font-body);
  font-size: var(--evl-text-xs);
  font-weight: var(--evl-weight-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--evl-fg-subtle);
}
.evl-kpi__value{
  font-family: var(--evl-font-display);
  font-weight: var(--evl-weight-display);
  font-size: var(--evl-text-2xl);
  line-height: var(--evl-leading-tight);
  letter-spacing: var(--evl-tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--evl-fg-strong);
}
.evl-kpi__sub{ font-size: var(--evl-text-sm); color: var(--evl-fg-subtle); }
/* Hairline strip: cells separated by 1px gaps that reveal the --evl-line ground. */
.evl-kpi-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--evl-hairline);
  background: var(--evl-line);
  border: var(--evl-hairline) solid var(--evl-line);
  border-radius: var(--evl-radius-md);
  overflow: hidden;
  margin-top: var(--evl-space-2);
}
.evl-kpi-strip__cell{
  background: var(--evl-surface);
  padding: var(--evl-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--evl-space-0);
}
.evl-kpi-strip__cell .l{
  font-size: var(--evl-text-xs);
  font-weight: var(--evl-weight-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--evl-fg-faint);
}
.evl-kpi-strip__cell .v{
  font-family: var(--evl-font-display);
  font-weight: var(--evl-weight-display);
  font-size: var(--evl-text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--evl-fg);
}
.evl-kpi-strip__cell .d{ font-size: var(--evl-text-xs); color: var(--evl-fg-subtle); line-height: var(--evl-leading-snug); }
@media (max-width: 760px){ .evl-kpi-strip{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px){ .evl-kpi-strip{ grid-template-columns: 1fr; } }


/* ---- Card (.evl-card), flat by default, hairline border, near-square corner. */
.evl-card{
  border: var(--evl-hairline) solid var(--evl-line);
  border-radius: var(--evl-radius-lg);
  padding: var(--evl-space-3);
  background: var(--evl-surface);
  box-shadow: var(--evl-shadow-0);   /* flat is the default */
}
.evl-card--lead{ border-color: var(--evl-accent); }
.evl-card--accent-top{ border-top: 2px solid var(--evl-accent); }


/* ---- Buttons, radius in the 4-8px band (NEVER pill). Flat fills.
   .evl-btn (primary, Ignition Violet flat in both themes), .evl-btn--ghost,
   .evl-btn--cta (Trust Orange, sparing). Hover -> --evl-primary-hover,
   :active press -> --evl-primary-deep. Focus inherits the global ring. */
.evl-btn{
  display: inline-flex;
  align-items: center;
  gap: var(--evl-space-1);
  height: 36px;
  padding: 0 var(--evl-space-2);
  border: var(--evl-hairline) solid transparent;
  border-radius: var(--evl-radius-md);   /* 6px, in the 4-8px band, never pill */
  font-family: var(--evl-font-body);
  font-size: var(--evl-text-sm);
  font-weight: var(--evl-weight-display);
  cursor: pointer;
  text-decoration: none;
  background: var(--evl-primary);
  color: var(--evl-on-primary);
  transition: background var(--evl-dur-fast) var(--evl-ease),
              border-color var(--evl-dur-fast) var(--evl-ease),
              color var(--evl-dur-fast) var(--evl-ease);
}
.evl-btn:hover{ background: var(--evl-primary-hover); color: var(--evl-on-primary); text-decoration: none; }
.evl-btn:active{ background: var(--evl-primary-deep); }
/* Ghost: transparent, hairline border, primary-coloured label. */
.evl-btn--ghost{
  background: transparent;
  border-color: var(--evl-line-strong);
  color: var(--evl-fg);
}
.evl-btn--ghost:hover{ background: var(--evl-bg-alt); border-color: var(--evl-line-strong); color: var(--evl-fg); }
.evl-btn--ghost:active{ background: var(--evl-surface-alt); }
/* CTA: Trust Orange fill (sparing, rare). Hover/press still route through the
   primary-hover / primary-deep motion hues for a single consistent press feel. */
.evl-btn--cta{
  background: var(--evl-cta);
  color: var(--evl-on-primary);
}
.evl-btn--cta:hover{ background: var(--evl-primary-hover); color: var(--evl-on-primary); }
.evl-btn--cta:active{ background: var(--evl-primary-deep); }


/* ---- Status pills (.evl-pill), four tiers, dot + word. Pill radius allowed
   here. Tint fills from the status-extension tokens; the dot + label read the
   solid status hue. nominal=success, caution=warn, critical=alert, neutral. */
.evl-pill{
  display: inline-flex;
  align-items: center;
  gap: var(--evl-space-1);
  font-family: var(--evl-font-body);
  font-size: var(--evl-text-xs);
  font-weight: var(--evl-weight-display);
  line-height: 1.4;
  padding: 2px var(--evl-space-1);
  border-radius: var(--evl-radius-pill);   /* pills MAY be pill-shaped (kit) */
  white-space: nowrap;
}
.evl-pill__dot{ width: 6px; height: 6px; border-radius: var(--evl-radius-pill); background: currentColor; flex: none; }
.evl-pill--nominal{  background: var(--evl-success-tint); color: var(--evl-success); }
.evl-pill--caution{  background: var(--evl-warn-tint);    color: var(--evl-warn-ink); }
.evl-pill--caution .evl-pill__dot{ background: var(--evl-warn); }
.evl-pill--critical{ background: var(--evl-alert-tint);   color: var(--evl-alert);   }
.evl-pill--neutral{  background: var(--evl-bg-alt);       color: var(--evl-fg-subtle); }


/* ---- Chip (.evl-chip), compact label token. Pill radius allowed. */
.evl-chip{
  display: inline-flex;
  align-items: center;
  gap: var(--evl-space-1);
  font-family: var(--evl-font-body);
  font-size: var(--evl-text-xs);
  font-weight: var(--evl-weight-display);
  padding: 2px var(--evl-space-1);
  border-radius: var(--evl-radius-pill);
  background: var(--evl-surface-alt);
  color: var(--evl-fg-muted);
}
.evl-chip--accent{ background: var(--evl-cta-tint); color: var(--evl-cta); }
.evl-chip--neutral{ background: var(--evl-bg-alt); color: var(--evl-fg-subtle); }


/* ---- Address click-to-copy (.addr base exists in section 8), affordance only.
   Dotted hairline underline signals "interactive"; hover shifts to the link hue. */
.addr{ cursor: pointer; border-bottom: var(--evl-hairline) dotted var(--evl-line-strong); }
.addr:hover{ color: var(--evl-link); }
.addr.is-copied{ color: var(--evl-success); border-bottom-color: var(--evl-success); }


/* ---- Matrix table (.evl-matrix), tabular, hairline rows, right-aligned
   numerals, optional zebra via --evl-bg-alt. Flat; no inner shadow. */
.evl-matrix{ width: 100%; border-collapse: collapse; font-size: var(--evl-text-sm); }
.evl-matrix th, .evl-matrix td{
  text-align: left;
  padding: var(--evl-space-1) var(--evl-space-2);
  border-bottom: var(--evl-hairline) solid var(--evl-line);
  vertical-align: top;
  line-height: var(--evl-leading-snug);
}
.evl-matrix th{
  font-family: var(--evl-font-body);
  font-weight: var(--evl-weight-display);
  font-size: var(--evl-text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--evl-fg-faint);
}
.evl-matrix td.num, .evl-matrix th.num{ font-variant-numeric: tabular-nums; text-align: right; }
/* Optional zebra: opt in by adding .is-zebra on the table. */
.evl-matrix.is-zebra tbody tr:nth-child(even){ background: var(--evl-bg-alt); }
.evl-matrix-scroll{ overflow-x: auto; }
@media (max-width: 767px){ .evl-matrix{ min-width: 560px; } }


/* ---- Mock-data strip (.evl-mockstrip), caution register. Flags non-real
   figures. Warn-tinted fill + warn hairline; label in the warn ink, which is
   body text on light because Solar Yellow fails contrast on white. */
.evl-mockstrip{
  display: flex;
  align-items: center;
  gap: var(--evl-space-1);
  background: var(--evl-warn-tint);
  border: var(--evl-hairline) solid var(--evl-warn);
  border-radius: var(--evl-radius-md);
  padding: var(--evl-space-1) var(--evl-space-2);
  font-size: var(--evl-text-xs);
  color: var(--evl-warn-ink);
}
.evl-mockstrip svg{ width: 14px; height: 14px; flex: none; }


/* ---- Key-insight / decision card (.evl-keyinsight), top accent rule in
   --evl-accent over a flat surface with hairline sides. */
.evl-keyinsight{
  background: var(--evl-surface);
  border: var(--evl-hairline) solid var(--evl-line);
  border-top: 2px solid var(--evl-accent);
  border-radius: var(--evl-radius-lg);
  padding: var(--evl-space-2) var(--evl-space-3);
  font-size: var(--evl-text-base);
  line-height: var(--evl-leading-snug);
}
.evl-keyinsight__head{ display: flex; align-items: center; gap: var(--evl-space-1); margin-bottom: var(--evl-space-1); }
.evl-keyinsight__head svg{ width: 15px; height: 15px; color: var(--evl-accent); }


/* ---- Disclosure (.evl-disclosure), flat <details>; mono +/- marker in accent. */
.evl-disclosure{
  border: var(--evl-hairline) solid var(--evl-line);
  border-radius: var(--evl-radius-md);
  background: var(--evl-surface);
}
.evl-disclosure > summary{
  cursor: pointer;
  padding: var(--evl-space-2);
  font-family: var(--evl-font-display);
  font-weight: var(--evl-weight-display);
  font-size: var(--evl-text-sm);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--evl-space-1);
  color: var(--evl-fg);
}
.evl-disclosure > summary::-webkit-details-marker{ display: none; }
.evl-disclosure > summary::before{
  content: "+";
  font-family: var(--evl-font-mono);
  font-weight: var(--evl-weight-display);
  color: var(--evl-accent);
}
.evl-disclosure[open] > summary::before{ content: "\2212"; }  /* minus sign, not a dash */
.evl-disclosure__body{ padding: 0 var(--evl-space-2) var(--evl-space-2); }


/* ---- Inline tooltip, abbr[data-tip], dotted underline, on-hover bubble.
   Bubble inverts fg/bg so it reads on either theme. */
abbr[data-tip]{
  position: relative;
  text-decoration: underline dotted;
  text-decoration-thickness: var(--evl-hairline);
  text-underline-offset: 2px;
  cursor: help;
}
abbr[data-tip]:hover::after{
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 7px);
  z-index: 30;
  width: max-content;
  max-width: 250px;
  background: var(--evl-fg);
  color: var(--evl-bg);
  font-family: var(--evl-font-body);
  font-style: normal;
  font-weight: var(--evl-weight-body);
  font-size: var(--evl-text-xs);
  line-height: var(--evl-leading-snug);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  padding: var(--evl-space-1) var(--evl-space-2);
  border-radius: var(--evl-radius-md);
  box-shadow: var(--evl-shadow-2);
  white-space: normal;
  pointer-events: none;
}
abbr[data-tip]:hover::before{
  content: "";
  position: absolute;
  left: 9px;
  bottom: calc(100% + 2px);
  z-index: 30;
  border: 5px solid transparent;
  border-top-color: var(--evl-fg);
  pointer-events: none;
}


/* ---- Footer / signature block (.evl-foot), hairline top rule, quiet meta. */
.evl-foot{
  margin-top: var(--evl-space-5);
  border-top: var(--evl-hairline) solid var(--evl-line);
  padding-top: var(--evl-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--evl-space-2);
}
.evl-foot__row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--evl-space-2);
}
.evl-foot__meta{ font-size: var(--evl-text-xs); color: var(--evl-fg-faint); }
.evl-foot__people{ display: flex; flex-wrap: wrap; gap: var(--evl-space-3); align-items: center; }
.evl-foot__sig{ display: flex; align-items: center; gap: var(--evl-space-2); }
/* The avatar is a fixed 46px circle whatever the intrinsic file is: object-fit
   crops to the circle, so a master that is square stays on-model and one that is
   not gets cropped rather than squashed. `flex:none` keeps it from collapsing
   when a long role line wraps. */
.evl-foot__avatar{
  width: 46px; height: 46px; flex: none; display: block;
  border-radius: 50%; object-fit: cover;
  border: var(--evl-hairline) solid var(--evl-line);
  background: var(--evl-surface);
}
.evl-foot__name{ font-family: var(--evl-font-display); font-weight: var(--evl-weight-display); font-size: var(--evl-text-sm); color: var(--evl-fg); }
.evl-foot__title{ font-size: var(--evl-text-xs); color: var(--evl-fg-subtle); margin-top: 1px; }


/* ---- Theme toggle (.evl-theme-toggle), quiet utility control. Pill-shaped
   is allowed for this chip-like control; it is not a button in the action set. */
.evl-theme-toggle{
  display: inline-flex;
  align-items: center;
  gap: var(--evl-space-1);
  height: 30px;
  padding: 0 var(--evl-space-2);
  border: var(--evl-hairline) solid var(--evl-line-strong);
  border-radius: var(--evl-radius-pill);
  background: transparent;
  color: var(--evl-fg-subtle);
  font-family: var(--evl-font-body);
  font-size: var(--evl-text-xs);
  font-weight: var(--evl-weight-display);
  cursor: pointer;
  transition: background var(--evl-dur-fast) var(--evl-ease),
              color var(--evl-dur-fast) var(--evl-ease);
}
.evl-theme-toggle:hover{ background: var(--evl-bg-alt); color: var(--evl-fg); }
.evl-theme-toggle svg{ width: 14px; height: 14px; flex: none; }
.evl-theme-toggle__label{ font: inherit; color: inherit; }


/* ---- Print, flatten to white ground, drop sticky + toggle, avoid breaks. */
@media print{
  @page{ size: A4; margin: 12mm; }
  .evl-wrap{ padding: 0; max-width: none; }
  .evl-nav{ position: static; }
  .evl-theme-toggle{ display: none; }
  .evl-section{ break-inside: avoid; }
  .evl-card, .evl-kpi-strip, .evl-keyinsight{ box-shadow: none; }
}