/* ============================================================================
   tokens.css — the single source of truth for Outsmart the System colour,
   type and spacing tokens. Custom properties ONLY: no component styles, no
   selectors that affect layout. That is deliberate, so this file can be loaded
   by every page (including the 18 that carry their own hand-written CSS)
   without any risk of a rule collision.

   Loaded FIRST on every page, before site-shell.css and before any inline
   <style>. Changing a brand colour is now a one-line edit here.

   Legacy aliases: pages written before the shell existed reference --green and
   --green-dk. Those are aliased to the accent tokens at the bottom of :root so
   the old names keep working and a pillar re-scope carries them along.
   ========================================================================= */

:root{
  /* ---- DARK NEUTRAL SCALE ---- */
  --black:#060607;
  --black-2:#0f0f12;
  --panel:#101013;
  --panel-2:#0b0b0d;
  --input-bg:#0a0a0c;
  --band:#0a0a0c;

  /* ---- TEXT ---- */
  --white:#fafaf9;
  --ink-1:#e6e6e4;
  --ink-2:#d4d4d8;
  --ink-3:#c9c9cd;
  --muted:#a1a1aa;
  --muted-2:#7c7c85;
  --placeholder:#808089;

  /* ---- LINES / SURFACES ---- */
  --line:#ffffff1a;
  --line-2:#ffffff12;
  --border-card:rgba(255,255,255,.08);
  --card-fill:rgba(255,255,255,.025);

  --error:#f87171;
  --on-accent:#04120a;

  /* ---- ACCENT SYSTEM (single point of control; teen/green default) ---- */
  --accent:#4ade80;
  --accent-deep:#16a34a;
  --accent-rgb:74,222,128;
  --accent-deep-rgb:22,163,74;   /* alpha variants of --accent-deep need their own triplet */
  --accent-grad-1:#5ef08e;
  --accent-grad-2:#28c464;
  --accent-soft:#bde6cd;
  --accent-glow:var(--accent-deep);

  /* ---- TYPE ---- */
  --f-d:'Bricolage Grotesque',sans-serif;
  --f-b:'Inter',sans-serif;
  --f-m:'JetBrains Mono',monospace;
  --t-h1:clamp(33px,4.6vw,58px);
  --t-h2:clamp(30px,4.2vw,50px);
  --t-h3:clamp(17px,2.2vw,20px);
  --t-price:52px;
  --t-price-sm:34px;
  --t-lede:clamp(16px,1.6vw,18px);
  --t-sub:clamp(15.5px,1.4vw,18px);
  --t-body:16px;
  --t-label:11px;
  --t-fine:12px;
  --tr-label:.2em;
  --tr-lock:.18em;
  --tr-legal:.06em;

  /* ---- LAYOUT / RADII / ELEVATION ---- */
  --wrap:1180px;
  --gutter:28px;
  --sec-y:clamp(56px,9vh,104px);
  --sec-y-sm:clamp(46px,7vh,82px);
  --r-input:11px;
  --r-btn:12px;
  --r-card-sm:16px;
  --r-card:20px;
  --r-price:22px;
  --r-pill:999px;
  --shadow-card:0 0 0 1px #00000060,0 40px 90px -40px #000,0 0 60px -20px rgba(var(--accent-rgb),.12);
  --glow-accent:0 0 40px rgba(var(--accent-rgb),.08);

  /* ---- LEGACY ALIASES (pre-shell pages reference these) ---- */
  --green:var(--accent);
  --green-dk:var(--accent-deep);
}

/* Class-scoped accents, for re-scoping a single card or section rather than a
   whole page (the homepage uses these on its ember Strong Hour door). Same seven
   accent tokens as the data-pillar blocks, plus the two elevation tokens that
   reference --accent-rgb so shadows re-tint with the scope. */
.scope-health{
  --accent:#E0823C;--accent-deep:#C2661F;--accent-rgb:224,130,60;--accent-deep-rgb:194,102,31;
  --accent-grad-1:#F29A50;--accent-grad-2:#C86A28;--accent-soft:#E8C4A0;--on-accent:#1a0d03;
  --shadow-card:0 0 0 1px #00000060,0 40px 90px -40px #000,0 0 60px -20px rgba(var(--accent-rgb),.12);
  --glow-accent:0 0 40px rgba(var(--accent-rgb),.08);
}
.scope-parent{
  --accent:#B89968;--accent-deep:#957B3E;--accent-rgb:184,153,104;--accent-deep-rgb:149,123,62;
  --accent-grad-1:#CBAE7E;--accent-grad-2:#9C7F4E;--accent-soft:#DDCBA6;--on-accent:#161006;
  --shadow-card:0 0 0 1px #00000060,0 40px 90px -40px #000,0 0 60px -20px rgba(var(--accent-rgb),.12);
  --glow-accent:0 0 40px rgba(var(--accent-rgb),.08);
}
/* Teen Investing shares the antique-gold values with the parent/editorial track
   ON PURPOSE (see PILLARS.md); they are separate opt-ins so either can move
   independently later. Do not "de-duplicate" them into one selector. */
.scope-investing{
  --accent:#B89968;--accent-deep:#957B3E;--accent-rgb:184,153,104;--accent-deep-rgb:149,123,62;
  --accent-grad-1:#CBAE7E;--accent-grad-2:#9C7F4E;--accent-soft:#DDCBA6;--on-accent:#161006;
  --shadow-card:0 0 0 1px #00000060,0 40px 90px -40px #000,0 0 60px -20px rgba(var(--accent-rgb),.12);
  --glow-accent:0 0 40px rgba(var(--accent-rgb),.08);
}

/* ---- PILLAR OPT-INS ---- */
:root[data-pillar="health"]{
  --accent:#E0823C;
  --accent-deep:#C2661F;   /* burnt-ember; clears AA 4.5:1 as kicker text on #060607 */
  --accent-rgb:224,130,60;
  --accent-deep-rgb:194,102,31;
  --accent-grad-1:#F29A50;
  --accent-grad-2:#C86A28;
  --accent-soft:#E8C4A0;
  --on-accent:#1a0d03;
}
:root[data-pillar="parent"]{
  --accent:#B89968;
  --accent-deep:#957B3E;   /* antique-gold; clears AA 4.5:1 as kicker text on #060607 */
  --accent-rgb:184,153,104;
  --accent-deep-rgb:149,123,62;
  --accent-grad-1:#CBAE7E;
  --accent-grad-2:#9C7F4E;
  --accent-soft:#DDCBA6;
  --on-accent:#161006;
}
/* Teen Investing. MUST stay :root[...] scoped: index.html carries data-pillar on
   ANCHOR tags as the GA4 analytics payload for cta_click_home_pillar (values
   side_hustle / investing / strong_hour). A bare [data-pillar="investing"]
   selector would match those anchors and inject accent tokens into them. The CSS
   hook and the analytics attribute share a name and nothing else. */
:root[data-pillar="investing"]{
  --accent:#B89968;
  --accent-deep:#957B3E;   /* antique-gold, shared with the parent track on purpose */
  --accent-rgb:184,153,104;
  --accent-deep-rgb:149,123,62;
  --accent-grad-1:#CBAE7E;
  --accent-grad-2:#9C7F4E;
  --accent-soft:#DDCBA6;
  --on-accent:#161006;
}