/* ==========================================================================
   THE WEALTH SCHOOL · Existential Portfolio Theory
   tokens.css — THE DESIGN LOCK. Single source of truth for the frozen look.
   --------------------------------------------------------------------------
   Locked 2026-07-16 from the approved canonical build (index.html, the Jul-11
   pre-brief snapshot served on :5200). Every page — Home, each section, every
   sub-page — links THIS file and reads these variables. Components never
   hard-code hex. If a colour needs changing it changes HERE, once, and the
   whole site moves together. That is the point: no drift.

   Two themes: nocturne (teal, the enforced default) and meridian (parchment,
   day). Values are byte-identical to the approved build. See DESIGN-LOCK.md.
   ========================================================================== */

/* ---- overture poster gradient (per theme) ---- */
:root, [data-theme="nocturne"]{ --poster-grad:radial-gradient(120% 100% at 60% 42%, #0B3033 0%, #081F22 46%, #061416 100%); }
[data-theme="meridian"]{ --poster-grad:radial-gradient(120% 100% at 60% 42%, #FBF8F1 0%, #F1E8D5 55%, #E7DBC2 100%); }

/* ---- NOCTURNE · the default (teal / bronze on deep teal) ---- */
:root, [data-theme="nocturne"]{
  --ground-0:#081A1C; --ground-1:#0B2426; --panel:#0E2B2E;
  --ink:#F1E9D8; --ink-mut:#A9B5B0;
  --bronze-hi:#EBCF8E; --bronze:#C9A24B; --bronze-lo:#7E6128;
  --accent:#8FD9BC; --cta:#9FE3C0; --cta-ink:#08201E; --hazard:#C24A44;
  --bronze-text:#E4C87A; /* AA gold for small labels on dark */
  --line:rgba(241,233,216,.10); --line-2:rgba(241,233,216,.06);
  --glass:rgba(235,207,142,.045); --glass-line:rgba(235,207,142,.14);
  --star:1; --shadow:0 24px 60px -30px rgba(0,0,0,.7);

  /* -- THE TWO CTA ACCENTS (ruled on the 2026-07-17 call) --
     The site has exactly two CTA voices and they must never be confused:
       LIME  = The Life Read  — #CCFF00 is the app's real accent, lifted from
               theliferead.com's own stylesheet so the button and the app it
               opens are the same colour. Electric on the dark ground.
       EMBER = Knock on the Door — the warm red-orange ask.
     -ink = the text colour that sits ON the accent fill. */
  --lime:#CCFF00; --lime-hover:#E6FF66; --lime-ink:#0A1A00; --lime-text:#CCFF00;
  /* ember FILL is #C4431C, not the brighter #DB4F26: the pill label is ~11.8px —
     "small text" by WCAG, so it needs 4.5:1 against the fill. #DB4F26 gave only
     3.82:1 and failed; #C4431C gives 4.73:1 and is still plainly red-orange.
     #DB4F26 lives on as the hover, so the button brightens when touched. */
  --ember:#C4431C; --ember-hover:#DB4F26; --ember-ink:#FFF6F0; --ember-text:#E8854A;
}

/* ---- MERIDIAN · day (deep teal / bronze on parchment) ---- */
[data-theme="meridian"]{
  --ground-0:#FBF8F1; --ground-1:#F5EFE2; --panel:#EFE7D4;
  --ink:#1D2E2F; --ink-mut:#4B5651;   /* ~7:1 on parchment */
  --bronze-hi:#C79A3E; --bronze:#A67F35; --bronze-lo:#6A4F1F;
  --accent:#147A5C; --cta:#0E3538; --cta-ink:#FBF8F1; --hazard:#8F2B27;
  --bronze-text:#6A4F1F; /* AA deep bronze for small labels on light */
  --line:rgba(29,46,47,.14); --line-2:rgba(29,46,47,.07);
  --glass:rgba(255,255,255,.42); --glass-line:rgba(29,46,47,.10);
  --star:0; --shadow:0 26px 60px -34px rgba(60,45,15,.35);

  /* -- the two CTA accents on parchment --
     The FILLS stay the brand hues: lime and ember pills are the same colour in
     both themes (that is the point of an accent), and both carry enough
     contrast against their -ink to pass on parchment.
     The TEXT tones must not: #CCFF00 as type on #F5EFE2 is ~1.1:1 — invisible.
     So -text darkens to an AA-safe olive / brick when the accent is used as
     type on the ground rather than as a fill. */
  --lime:#CCFF00; --lime-hover:#B8E600; --lime-ink:#0A1A00; --lime-text:#5F7320;
  --ember:#C4431C; --ember-hover:#A63A12; --ember-ink:#FFF6F0; --ember-text:#A8332F;
}

/* ==========================================================================
   ADDITIVE semantic tokens — for the NEW section pages (Home, Steward
   Formation, …). These name the type / motion / geometry the approved build
   already uses inline, so new pages match without re-guessing. Theme-neutral.
   ========================================================================== */
:root{
  /* type families */
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;   /* display / headings */
  --font-body:'Manrope', system-ui, -apple-system, sans-serif;    /* body */
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;           /* eyebrows / labels */

  /* type scale (from the approved build's clamp() values) */
  --fs-display:clamp(2.9rem, 9vw, 5.6rem);
  --fs-lede:clamp(1.15rem, 3.2vw, 1.7rem);
  --fs-eyebrow:.66rem;
  --tracking-eyebrow:.28em;
  --lh-body:1.6;

  /* -- THE MONO LABEL SCALE (ruled on the 2026-07-17 review, T3) --
     The mono tier is the site's third voice — eyebrows, statuses, pill labels,
     the legal line. It had no scale: labels were set at .60/.62/.64/.66/.68/.70/
     .72rem with tracking anywhere from .10em to .30em, almost all hard-coded, so
     two labels at the SAME size could differ in weight and tracking. Three steps
     now, and every label picks one. Tracking is FIXED PER STEP — it is part of
     the step, not a per-component decision: smaller type needs more tracking to
     stay readable, which is why -sm tracks widest.
       label-lg  .72  section statuses, placeholders, sub-list nav
       label     .66  the default — eyebrows, pill-sm, form labels, meta lines
       label-sm  .60  the quiet tier — legal line, footnotes, captions
     --fs-eyebrow / --tracking-eyebrow above are kept as aliases of the middle
     step so the approved build's inline uses stay valid.
     Tracking RISES as the type falls, which is why -lg is the tightest: .14em is
     also the value the two width-critical labels (.fact, the sub-nav) were hand-
     tuned to, so the scale does not re-break what fitting them cost. */
  --fs-label-lg:.72rem;  --tracking-label-lg:.14em;
  --fs-label:.66rem;     --tracking-label:.18em;
  --fs-label-sm:.60rem;  --tracking-label-sm:.22em;

  /* motion */
  --ease:cubic-bezier(.4, 0, .2, 1);
  --dur-fast:.18s; --dur:.26s; --dur-slow:.6s; --dur-theme:.6s;

  /* geometry */
  --radius:12px; --radius-pill:99px;
  --wrap:min(1200px, 92vw);
}

/* -- the label floor (T3) --
   rem does not shrink on a phone, but legibility does: .60rem is 9.6px and
   .66rem is 10.56px at a 16px root, and uppercase mono at that size on a 375px
   handset — the primary target — is past readable. On a handheld the two lower
   steps re-resolve against an 11px floor. Desktop keeps the designed scale
   exactly; only the handheld moves. If you add a label step, floor it here too.

   POINTER:COARSE, not width alone. "Is this a phone" is not a width question:
   turn an iPhone 13 sideways and it is 844px wide — past any narrow breakpoint —
   while being the exact device the floor exists for. A width-keyed floor let
   every label on a landscape phone fall back to 9.6px. Coarse pointer means a
   finger, which means a handheld, which means the floor applies. The width arm
   stays for narrow windows on a mouse machine. A coarse-pointer tablet gets the
   floor too, and should: 11px is a floor, not a look. */
@media (max-width:600px), (pointer:coarse){
  :root{
    --fs-label-lg:max(.72rem, 11px);
    --fs-label:max(.66rem, 11px);
    --fs-label-sm:max(.60rem, 11px);
    --fs-eyebrow:max(.66rem, 11px);
  }
}