/* ════════════════════════════════════════════════════════════════════════
   ENLIKO DESIGN SYSTEM — "Institutional Dark"
   Single source of truth for colour, type, space, elevation and motion.

   Two layers live here:
     1. TOKENS      — the new vocabulary (--ink-*, --fg-*, --acc, --up/--down…)
     2. LEGACY MAP  — the ~70 custom-property names already scattered across
                      30 templates, re-pointed at the tokens above.

   The legacy map is written under `html:root` (specificity 0,1,1) so it beats
   the per-template `:root` blocks (0,1,0) regardless of source order. That is
   what lets every existing page adopt this system without touching its markup
   or its JavaScript — critical for terminal.html, which is live trading UI.
   ════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────  1. TOKENS  ───────────────────────────── */

:root {
  /* ── Ground & surfaces ──────────────────────────────────────────────
     A near-neutral ramp with a faint cool cast (blue channel runs ~4 pts
     above red). Pure #000 reads as a void on OLED and makes hairlines
     impossible to place; #08090C keeps depth available.                */
  --ink-1000: #050609;
  --ink-900:  #08090C;   /* page ground                                  */
  --ink-850:  #0B0D11;   /* sunken / inset wells                         */
  --ink-800:  #0F1216;   /* raised panel                                 */
  --ink-750:  #13171D;
  --ink-700:  #181D24;   /* card                                         */
  --ink-600:  #202730;   /* card hover, control rest                     */
  --ink-500:  #2B333F;   /* strong border, disabled fill                 */
  --ink-400:  #3A434F;

  /* ── Hairlines ──────────────────────────────────────────────────────
     Borders are light-on-dark at very low alpha, never solid greys —
     they must survive on top of any surface in the ramp.               */
  --line:    rgba(255, 255, 255, 0.06);
  --line-2:  rgba(255, 255, 255, 0.10);
  --line-3:  rgba(255, 255, 255, 0.16);
  --line-in: rgba(255, 255, 255, 0.04);  /* inner top highlight         */

  /* ── Foreground ─────────────────────────────────────────────────────*/
  /* Contrast ratios are against --ink-900 and were measured, not guessed.
     WCAG AA needs 4.5:1 for body text, 3:1 for large text.               */
  --fg:    #EDF0F5;   /* primary — slightly off-white, less glare  17.9:1 */
  --fg-2:  #9AA4B2;   /* secondary copy                             7.9:1 */
  --fg-3:  #7C8798;   /* muted labels — was #6B7684 at 4.31, failing 5.5:1 */
  --fg-4:  #5E6875;   /* decorative / disabled only — never data     3.5:1 */
  --fg-on-acc: #FFFFFF;

  /* ── Accent — brand violet ──────────────────────────────────────────
     Hue 268°, measured off the Enliko logo mark, so the UI and the mark
     finally agree. Lightness is lifted to 62% rather than the old
     #7C3AED at 58%: that value only reached 3.49 against the page
     ground, which is why links and small accents in it read poorly.
     At 62% both directions clear 4.4 (white on fill / fill on ground).

     ONE hue. Never used for data: green/red stay reserved for market
     direction so an accent-coloured element can never be misread as
     a P&L signal.                                                      */
  --acc:      #9950F0;
  --acc-hi:   #B06BFF;   /* links & text on dark — 6.06 on the ground   */
  --acc-lo:   #7125C7;   /* pressed / dark fill                          */
  /* Fill for SOLID buttons. --acc is tuned to read as text/iconography on
     the dark ground; used as a background under white labels it measures
     4.41 — just under AA. Two points darker puts white at 4.92 while
     staying the same violet to the eye.                                */
  --acc-fill: #9147E8;
  --acc-06:   rgba(153, 80, 240, 0.06);
  --acc-10:   rgba(153, 80, 240, 0.10);
  --acc-16:   rgba(153, 80, 240, 0.16);
  --acc-28:   rgba(153, 80, 240, 0.28);
  --acc-45:   rgba(153, 80, 240, 0.45);

  /* ── Market semantics — numbers only ────────────────────────────────*/
  --up:       #28C99A;
  --up-dim:   rgba(40, 201, 154, 0.14);
  --up-line:  rgba(40, 201, 154, 0.30);
  --down:     #F0575D;
  --down-dim: rgba(240, 87, 93, 0.14);
  --down-line:rgba(240, 87, 93, 0.30);
  --warn:     #E5A03C;
  --warn-dim: rgba(229, 160, 60, 0.14);
  --flat:     var(--fg-3);

  /* ── Exchange brand marks (kept, desaturated to fit the ramp) ───────*/
  --ex-bybit: #F0A93C;
  --ex-hl:    #4FD0C0;
  --ex-cap:   #4E8BF0;

  /* ── Typography ─────────────────────────────────────────────────────
     Inter Tight for display (tight grotesk, set at 600 — never 800/900;
     ultra-bold at large sizes is the single loudest "amateur" tell).
     Inter for UI. JetBrains Mono for tabular data.                     */
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* Capped at 72px, not 88px. At 88 a three-line Russian or German headline
     ran ~270px tall, which is what forced the hero past the fold. 72 still
     reads as a statement and matches the scale top-tier product sites use. */
  --fs-display-1: clamp(2.5rem, 1.7rem + 3.2vw, 4.5rem);    /*  40 → 72 */
  --fs-display-2: clamp(2rem,   1.4rem + 2.4vw, 3.25rem);   /*  32 → 52 */
  --fs-display-3: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);  /*  24 → 34 */
  --fs-h4:   1.125rem;   /* 18 */
  --fs-lg:   1.0625rem;  /* 17 */
  --fs-base: 0.9375rem;  /* 15 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-xs:   0.75rem;    /* 12 */
  --fs-micro:0.6875rem;  /* 11 — eyebrow / overline                     */

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.6;
  --lh-loose: 1.75;

  --tr-display: -0.035em;   /* negative tracking at display sizes       */
  --tr-head:    -0.02em;
  --tr-body:    -0.01em;
  --tr-eyebrow:  0.09em;    /* positive tracking for uppercase overline */

  /* ── Space — 4px base ───────────────────────────────────────────────*/
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;

  --gutter: clamp(20px, 4vw, 40px);
  --maxw:   1280px;
  --maxw-wide: 1440px;
  --maxw-prose: 68ch;

  /* ── Radius — deliberately small. Big rounding reads as consumer app.*/
  --r-1: 4px;  --r-2: 6px;  --r-3: 8px;
  --r-4: 12px; --r-5: 16px; --r-6: 24px;
  --r-full: 999px;

  /* ── Elevation — real shadows, no coloured glow ─────────────────────
     Glow (0 0 40px <brand colour>) is the second loudest amateur tell.
     Depth comes from a tight contact shadow plus a wide ambient one.   */
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --e-2: 0 2px 4px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.30);
  --e-3: 0 4px 8px rgba(0, 0, 0, 0.40), 0 12px 32px rgba(0, 0, 0, 0.36);
  --e-4: 0 8px 16px rgba(0, 0, 0, 0.44), 0 32px 72px rgba(0, 0, 0, 0.44);
  --e-inset: inset 0 1px 0 var(--line-in);
  /* the only permitted "glow" — a focus ring, and it is a ring         */
  --ring: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--acc-45);

  /* ── Motion ─────────────────────────────────────────────────────────*/
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-1: 120ms;  --t-2: 200ms;  --t-3: 320ms;  --t-4: 600ms;

  --z-bg: 0; --z-body: 1; --z-sticky: 100; --z-nav: 900;
  --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200;
}

/* ────────────────────────  2. LEGACY MAP  ────────────────────────────
   Re-points every custom property already in use across the templates.
   `html:root` outranks the templates' own `:root` blocks.              */

html:root {
  /* surfaces */
  --bg:            var(--ink-900);
  --bg-primary:    var(--ink-900);
  --bg-secondary:  var(--ink-800);
  --bg-tertiary:   var(--ink-750);
  --bg-card:       var(--ink-700);
  --bg-hover:      var(--ink-600);
  --bg-glass:      rgba(255, 255, 255, 0.025);
  --glass:         rgba(255, 255, 255, 0.025);
  --glass-bg:      rgba(255, 255, 255, 0.025);
  --surface:       var(--ink-800);
  --card-bg:       var(--ink-700);

  /* lines */
  --border:        var(--line);
  --border-color:  var(--line);
  --border-hover:  var(--line-2);

  /* text */
  --text:           var(--fg);
  --text-primary:   var(--fg);
  --text-secondary: var(--fg-2);
  --text-muted:     var(--fg-3);
  --text-disabled:  var(--fg-4);
  --text-gold:      var(--warn);

  /* accent — every former purple/blue/cyan collapses to the one hue */
  --accent:           var(--acc);
  --accent-primary:   var(--acc);
  --accent-secondary: var(--acc-hi);
  --accent-purple:    var(--acc);
  --accent-blue:      var(--acc);
  --accent-cyan:      var(--acc-hi);
  --accent-glow:      var(--acc-16);
  --primary:          var(--acc);

  /* market direction */
  --green:          var(--up);
  --accent-green:   var(--up);
  --green-dim:      var(--up-dim);
  --success:        var(--up);
  --red:            var(--down);
  --accent-red:     var(--down);
  --accent-crimson: var(--down);
  --red-dim:        var(--down-dim);
  --danger:         var(--down);
  --error:          var(--down);
  --yellow:         var(--warn);
  --accent-yellow:  var(--warn);
  --accent-gold:    var(--warn);
  --accent-orange:  var(--warn);
  --yellow-dim:     var(--warn-dim);
  --warning:        var(--warn);

  /* exchange marks */
  --bybit-color: var(--ex-bybit);
  --hl-color:    var(--ex-hl);

  /* gradients — flattened to near-solid. A gradient that spans three
     hues (the old purple→gold→green) is the loudest tell of all.      */
  --gradient-primary: linear-gradient(180deg, var(--acc-hi) 0%, var(--acc) 100%);
  --gradient-purple:  linear-gradient(180deg, var(--acc-hi) 0%, var(--acc) 100%);
  --gradient-gold:    linear-gradient(180deg, #F2B45A 0%, var(--warn) 100%);
  --gradient-green:   linear-gradient(180deg, #3FE0B0 0%, var(--up) 100%);
  --gradient-red:     linear-gradient(180deg, #FF7176 0%, var(--down) 100%);
  --gradient-success: linear-gradient(180deg, #3FE0B0 0%, var(--up) 100%);
  --gradient-stark:   linear-gradient(180deg, #FFFFFF 0%, #B8C0CC 100%);
  --gradient-shine:   linear-gradient(180deg, #FFFFFF 0%, #B8C0CC 100%);

  /* glow → elevation. Kept as valid box-shadow values so existing
     `box-shadow: var(--glow-primary)` rules keep parsing, but they now
     render as depth instead of neon.                                  */
  --glow-primary: var(--e-2);
  --glow-green:   var(--e-2);
  --glow-red:     var(--e-2);
  --glow-gold:    var(--e-2);
  --glow-blue:    var(--e-2);

  --shadow-sm:   var(--e-1);
  --shadow-md:   var(--e-2);
  --shadow-lg:   var(--e-3);
  --shadow-xl:   var(--e-4);
  --shadow-glow: var(--e-2);

  /* radius */
  --radius-sm:   var(--r-2);
  --radius-md:   var(--r-3);
  --radius-lg:   var(--r-4);
  --radius-xl:   var(--r-5);
  --radius-full: var(--r-full);

  /* space */
  --space-xs: var(--s-1);  --space-sm: var(--s-2); --space-md: var(--s-4);
  --space-lg: var(--s-5);  --space-xl: var(--s-6); --space-2xl: var(--s-7);

  /* ── Second-wave aliases ─────────────────────────────────────────────
     Found by auditing every var() reference across the templates against
     the names this file defines. These 27 were falling through to whatever
     each template happened to declare locally, which is why muted text and
     borders drifted page to page — --muted alone is referenced 184 times. */
  --muted:      var(--fg-3);
  --mut:        var(--fg-3);
  --text-sec:   var(--fg-2);
  --text2:      var(--fg-2);
  --text3:      var(--fg-3);
  --txt:        var(--fg);
  --bg2:        var(--ink-800);
  --bg3:        var(--ink-750);
  --card:       var(--ink-700);
  --card-border:var(--line);
  --bdr:        var(--line);
  --border-primary:   var(--line);
  --border-secondary: var(--line-2);
  --ac:            var(--acc);
  --accent-light:  var(--acc-hi);
  --cyan:          var(--acc-hi);
  --accent-success: var(--up);
  --green-light:    var(--up);
  --accent-danger:  var(--down);
  --red-light:      var(--down);
  --radius:     var(--r-3);
  --spacing-xs: var(--s-1);
  --spacing-sm: var(--s-2);
  --spacing-md: var(--s-4);
  --spacing-lg: var(--s-5);
  --transition:      var(--t-2) var(--ease);
  --transition-base: var(--t-2) var(--ease);

  /* motion */
  --transition-fast:   var(--t-1) var(--ease);
  --transition-normal: var(--t-2) var(--ease);
  --transition-slow:   var(--t-3) var(--ease);
}

/* ─────────────────────────  3. BASE  ──────────────────────────────────
   Everything in this block is gated on `body.ds`.

   Reason: this stylesheet is loaded by ~30 legacy templates that each
   carry their own ~1000-line inline <style>. Rules like `h1 { margin: 0 }`
   or `a { text-decoration: none }` would silently reflow pages nobody
   asked me to touch — including terminal.html, which is live trading UI.
   Pages that have actually been redesigned opt in with <body class="ds">;
   everything else receives only the tokens, the de-noise pass, and the
   .e-* primitives, none of which can move existing layout.              */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}

body.ds *, body.ds *::before, body.ds *::after { box-sizing: border-box; }

body.ds {
  margin: 0;
  background: var(--ink-900);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv05' 1, 'cv08' 1, 'ss03' 1;  /* Inter: single-storey l, disambiguated I/1 */
  overflow-x: hidden;
}

/* Display type: one weight (600), tight tracking, tight leading.       */
body.ds h1, body.ds h2, body.ds h3,
.e-display-1, .e-display-2, .e-display-3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}
body.ds h4, body.ds h5, body.ds h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tr-head);
  line-height: var(--lh-snug);
  margin: 0;
}

.e-display-1 { font-size: var(--fs-display-1); }
.e-display-2 { font-size: var(--fs-display-2); line-height: var(--lh-snug); }
.e-display-3 { font-size: var(--fs-display-3); line-height: var(--lh-snug); }

body.ds p { margin: 0; }
.e-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  max-width: 52ch;
  text-wrap: pretty;
}
.e-body   { font-size: var(--fs-base); color: var(--fg-2); line-height: var(--lh-body); }
.e-small  { font-size: var(--fs-sm);   color: var(--fg-3); }

/* Overline / eyebrow — replaces the repeated "badge pill above every
   heading" pattern, which read as a purchased template.               */
.e-eyebrow {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--s-4);
}
.e-eyebrow--acc { color: var(--acc-hi); }

/* :where() keeps this reset at specificity (0,0,1). Written as `body.ds a`
   it scored (0,1,2) and beat every component class — so an <a class="e-btn">
   silently inherited body colour instead of using --_fg, and the same for
   .e-link. A reset must never outrank the components built on top of it. */
:where(body.ds) a { color: inherit; text-decoration: none; }
.e-link {
  color: var(--fg-2);
  transition: color var(--t-1) var(--ease);
  text-underline-offset: 0.22em;
}
.e-link:hover { color: var(--fg); }

/* Numbers. Every price, percentage and counter on a trading platform
   must be tabular, or the digits shuffle horizontally on each tick.    */
.e-num, .num, .price, .value, .mc-value, .idx-value, .stat-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
.e-num--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.e-up   { color: var(--up); }
.e-down { color: var(--down); }
.e-flat { color: var(--flat); }

::selection { background: var(--acc-28); color: #FFFFFF; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-2);
}

/* Scrollbars — thin, neutral, no brand colour. */
* { scrollbar-width: thin; scrollbar-color: var(--ink-500) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-500);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: content-box; }

/* ────────────────────────  4. LAYOUT  ──────────────────────────────── */

.e-wrap  { width: 100%; max-width: var(--maxw);      margin-inline: auto; padding-inline: var(--gutter); }
.e-wrap--wide { width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: var(--gutter); }

/* Section rhythm. Sizes alternate so consecutive sections do not read
   as one undifferentiated stack of equal-weight grids.                 */
/* 96px each side = 192px between adjacent sections. The previous 128 stacked
   to 256px of dead air between every band, which reads as an unfinished page
   rather than a generous one. */
.e-section     { padding-block: clamp(56px, 6.5vw, 96px); position: relative; }
.e-section--sm { padding-block: clamp(40px, 4.5vw, 64px); }
.e-section--lg { padding-block: clamp(72px, 9vw, 128px); }
.e-section--sunk { background: var(--ink-850); border-block: 1px solid var(--line); }

.e-section-head { max-width: 62ch; margin-bottom: var(--s-7); }
.e-section-head--center { margin-inline: auto; text-align: center; }

/* A full-bleed hairline used to separate bands without a heavy border. */
.e-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
}

/* ──────────────────────  5. PRIMITIVES  ────────────────────────────── */

/* Surface — the base card. Hairline + inner top highlight gives the
   panel a physical top edge without any glow.                          */
.e-surface {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--e-inset);
}
.e-card {
  background: linear-gradient(180deg, var(--ink-750) 0%, var(--ink-800) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--e-inset), var(--e-1);
  padding: var(--s-5);
  transition: border-color var(--t-2) var(--ease),
              transform   var(--t-2) var(--ease),
              box-shadow  var(--t-2) var(--ease);
}
.e-card--interactive:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
  box-shadow: var(--e-inset), var(--e-3);
}
.e-card--inset { background: var(--ink-850); box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }

/* Buttons — 8px radius, no glow, 1px optical inner highlight. */
.e-btn {
  --_bg: var(--ink-700);
  --_fg: var(--fg);
  --_bd: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 40px;
  padding-inline: var(--s-4);
  border: 1px solid var(--_bd);
  border-radius: var(--r-3);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 550;
  letter-spacing: var(--tr-body);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--t-1) var(--ease),
              border-color var(--t-1) var(--ease),
              transform var(--t-1) var(--ease),
              opacity var(--t-1) var(--ease);
}
.e-btn:active { transform: translateY(1px); }
.e-btn[disabled], .e-btn[aria-disabled='true'] {
  opacity: 0.45; pointer-events: none;
}

.e-btn--primary {
  --_bg: var(--acc-fill);
  --_fg: var(--fg-on-acc);
  --_bd: transparent;
  box-shadow: var(--e-inset), var(--e-1);
  font-weight: 600;
}
/* Hover LIGHTENS the fill, which lowers contrast against white — so it only
   goes as far as --acc (4.41) on a transient state, never to --acc-hi. */
.e-btn--primary:hover { --_bg: var(--acc); }

.e-btn--secondary { --_bg: var(--ink-700); --_bd: var(--line-2); }
.e-btn--secondary:hover { --_bg: var(--ink-600); --_bd: var(--line-3); }

.e-btn--ghost { --_bg: transparent; --_bd: var(--line); --_fg: var(--fg-2); }
.e-btn--ghost:hover { --_bg: rgba(255,255,255,.04); --_fg: var(--fg); --_bd: var(--line-2); }

.e-btn--quiet { --_bg: transparent; --_bd: transparent; --_fg: var(--fg-2); }
.e-btn--quiet:hover { --_bg: rgba(255,255,255,.05); --_fg: var(--fg); }

.e-btn--lg   { height: 48px; padding-inline: var(--s-5); font-size: var(--fs-base); }
.e-btn--icon { width: 40px; padding-inline: 0; }
.e-btn--icon.e-btn--lg { width: 48px; }

/* Chips / status pills — the ONLY place a fully-round radius belongs. */
.e-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 26px;
  padding-inline: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--fs-xs);
  color: var(--fg-2);
  white-space: nowrap;
}
.e-chip strong { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

.e-dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--fg-3); flex: none; }
.e-dot--live { background: var(--up); box-shadow: 0 0 0 0 var(--up-line); animation: e-ping 2.4s var(--ease) infinite; }
@keyframes e-ping {
  0%   { box-shadow: 0 0 0 0 var(--up-line); }
  70%  { box-shadow: 0 0 0 6px rgba(40, 201, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 201, 154, 0); }
}

/* Tag — square-ish, for categories and exchange labels. */
.e-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding-inline: 8px;
  border: 1px solid var(--line); border-radius: var(--r-1);
  background: rgba(255,255,255,.03);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--fg-3);
}
.e-tag--up   { color: var(--up);   border-color: var(--up-line);   background: var(--up-dim); }
.e-tag--down { color: var(--down); border-color: var(--down-line); background: var(--down-dim); }
.e-tag--acc  { color: var(--acc-hi); border-color: var(--acc-28);  background: var(--acc-10); }

/* Icon frame — replaces emoji. Sized for a 16–20px glyph inside. */
.e-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--ink-700);
  box-shadow: var(--e-inset);
  color: var(--fg-2);
  font-size: 16px;
}
.e-ico--sm  { width: 30px; height: 30px; border-radius: var(--r-2); font-size: 13px; }
.e-ico--acc { color: var(--acc-hi); border-color: var(--acc-28); background: var(--acc-10); }

/* Data row — label left, tabular figure right, hairline between. */
.e-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.e-row:last-child { border-bottom: 0; }
.e-row dt, .e-row .e-row-k { color: var(--fg-3); }
.e-row dd, .e-row .e-row-v {
  margin: 0; color: var(--fg); font-weight: 550;
  font-variant-numeric: tabular-nums;
}

/* Meter — flat track, no gradient fill, no glow. */
.e-meter { height: 3px; border-radius: var(--r-full); background: var(--ink-600); overflow: hidden; }
.e-meter > i { display: block; height: 100%; background: var(--acc); border-radius: inherit;
               transition: width var(--t-4) var(--ease); }
.e-meter--up   > i { background: var(--up); }
.e-meter--down > i { background: var(--down); }
.e-meter--warn > i { background: var(--warn); }

/* ──────────────────  6. MOTION / REVEAL  ──────────────────────────── */

/* Fail-safe by design: the hidden state is gated on `.js-reveal`, which an
   inline head script sets. If scripting is off, blocked, or throws before
   the observer is wired, every .e-reveal simply stays visible instead of
   leaving the page blank. Never make content opacity:0 unconditionally. */
.js-reveal .e-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-4) var(--ease), transform var(--t-4) var(--ease);
  will-change: opacity, transform;
}
.js-reveal .e-reveal.is-in { opacity: 1; transform: none; }
.e-reveal[data-delay='1'] { transition-delay: 60ms; }
.e-reveal[data-delay='2'] { transition-delay: 120ms; }
.e-reveal[data-delay='3'] { transition-delay: 180ms; }
.e-reveal[data-delay='4'] { transition-delay: 240ms; }
.e-reveal[data-delay='5'] { transition-delay: 300ms; }

/* Anything that opts out of animation entirely. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal .e-reveal { opacity: 1; transform: none; }
}

/* ──────────────────  7. GLOBAL DE-NOISE  ──────────────────────────────
   Blanket corrections applied to the legacy templates. Scoped to
   patterns, never to layout, so nothing can shift position.           */

/* Kill the three-hue animated gradient text wherever it survives. */
html:root .gradient-text,
html:root .text-gradient,
html:root h1 .gradient {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--fg) !important;
  animation: none !important;
}

/* Legacy headings were 800–900. Bring them to the system weight.
   h3 is included: the audit found weight-700 h3 on nine templates. */
html:root h1, html:root h2, html:root h3 { font-weight: 600; }

/* ── Accent as TEXT ──────────────────────────────────────────────────
   --acc is tuned as a FILL. Measured as small text on the dark ground it
   reaches only 4.26:1, under the 4.5 AA floor — which is exactly why
   --acc-hi exists (6.06:1). Legacy templates reach for the accent for
   links and selected states without making that distinction, so the
   recurring patterns are corrected here rather than in 30 files.       */
/* Text-only accent states (no fill behind them). */
html:root .app-nav__link:hover,
html:root .app-nav__link.is-active,
html:root .period-tab.active,
html:root .tab.active,
html:root .nav-link.active {
  color: var(--acc-hi);
}

/* Accent-FILLED states. These carry a white label, and white on --acc only
   reaches 4.41 — so the fill moves to --acc-fill (4.92). Colouring the label
   instead would put light-on-light: the first pass did exactly that and the
   audit caught it at 1.34, which is how this rule got split in two. */
html:root .pill.active,
html:root .filter-btn.active,
html:root .exchange-btn.active,
html:root .market-type-btn.active {
  background: var(--acc-fill);
  border-color: var(--acc-fill);
  color: #fff;
  box-shadow: none;
}

/* ── Coloured glow ───────────────────────────────────────────────────
   The token map already neutralised --glow-*, but several templates
   hard-code `0 0 Npx rgba(brand)`. CSS cannot match a shadow by value,
   so the specific survivors the audit found are listed here.          */
html:root .podium-medal,
html:root .market-type-toggle,
html:root .market-type-btn.active,
html:root .exchange-btn.active,
html:root .bf-logo,
html:root .network-layout,
html:root #soulPanel,
html:root .soul-panel {
  box-shadow: none;
}

/* (The .e-emoji-legacy stopgap was removed once the emoji sweep finished —
   no pictographs remain in any template.) */