/* ==========================================================================
   LVLUP Counseling — brand tokens
   Single source of truth. Nothing else in the project defines a brand value.

   Palette matches the Sketch comp and the Caldeira brand PDF:
     plum      #1d1638
     purple    #644cc9
     terra     #d28664
     blush     #edcfc1
     cream     #f7ede5   section background
     cream-lt  #fbf5f0   credential card

   MEASURED CONTRAST — every pairing below computed from the hex values above,
   not estimated and not carried over from the comp. Re-generate rather than
   hand-edit; two entries here were wrong for weeks (see the note at the end).

     blush       on plum      ........ 11.68  AAA
     white       on plum      ........ 17.16  AAA
     terra       on plum      ........  5.99  AA
     white       on purple    ........  6.14  AA
     cream       on purple    ........  5.32  AA
     plum        on terra     ........  5.99  AA
     plum        on cream     ........ 14.87  AAA
     plum        on cream-lt  ........ 15.87  AAA
     purple      on white     ........  6.14  AA
     purple      on cream     ........  5.32  AA
     purple      on cream-lt  ........  5.68  AA
     purple      on blush     ........  4.18  LARGE ONLY
     purple-deep on blush     ........  5.27  AA
     terra-ink   on cream-lt  ........  7.05  AAA
     terra-ink   on cream     ........  6.60  AA
     terra-ink   on white     ........  7.62  AAA

   FAILURES — do not use these as text at any size:
     terra       on white     ........  2.86
     terra       on cream-lt  ........  2.65
     terra       on cream     ........  2.48
     terra       on blush     ........  1.95
     terra       on purple    ........  2.15
     purple      on plum      ........  2.79

   TERRACOTTA IS A DARK-BACKGROUND COLOUR. As text it is safe on plum (5.99) and
   nowhere else. On anything light it is decoration only — rules, fills, blocks —
   or use --terra-ink, which is the same hue and saturation darkened to pass.

   CORRECTED 27 Sep: this table previously read "plum on cream ~11.4" (actually
   14.87) and "purple on cream ~4.2 LARGE ONLY" (actually 5.32, AA). The 4.18
   figure belongs to purple on BLUSH, not cream — the two got conflated, and the
   wrong one was propagated into CLAUDE.md and reasoned from for weeks.
   ========================================================================== */

:root{
  --plum:#1d1638;
  --plum-card:#292443;   /* lifted panel on plum — the footer card */
  --purple:#644cc9;
  --purple-deep:#5440ad;
  --terra:#d28664;
  /* Terracotta as TEXT on a light background. Same hue and saturation, darkened
     until it passes: 7.05 on cream-lt (AAA), 6.60 on cream (AA), 7.62 on white (AAA).
     --terra itself measures 2.65 on cream-lt and must stay a fill/rule/block
     colour on anything light. */
  --terra-ink:#824226;
  --blush:#edcfc1;
  --cream:#f7ede5;
  --cream-lt:#fbf5f0;
  --white:#fff;

  --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Source Serif 4',Georgia,'Times New Roman',serif;

  /* comp is a 1504px canvas with 122px gutters -> 1260px content column */
  /* 1340 outer - 2x40 padding = the comp's 1260px content column,
     which lands on the comp's 122px gutters at a 1504px viewport */
  --maxw:1340px;
  --gutter:clamp(20px,2.7vw,40px);
  --radius:12px;
  --radius-sm:7px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---------- motion ----------
     One place to dial the whole system. The reveal intensity is set by
     --rise and --reveal-scale; halve --rise for a gentler pass, double it
     for a more assertive one. Nothing in site.css hard-codes a duration. */
  --ease-out:cubic-bezier(.16,1,.3,1);   /* long tail — reveals settle rather than stop */
  /* NOT --ease-out. That curve is ~75% complete at 15% of its duration, which
     is right for something arriving but wrong for a wipe you are meant to
     watch travel — it reads as an instant colour swap. This one eases in a
     little first so the edge is legible the whole way up. */
  --ease-wipe:cubic-bezier(.36,.02,.22,1);
  --dur-hover:.32s;                      /* buttons, links, small state changes */
  --dur-panel:.46s;                      /* FAQ open/close */
  --dur-bio:.5s;                         /* about: the bio panel expanding */
  --dur-band:.72s;                       /* band: one slide swiping to the next */
  --band-hold:6s;                        /* band: dwell per slide — site.js reads this */
  --dur-wipe:.21s;                       /* button hover: colour rising from the bottom (was .42s) */
  --dur-arrow:.38s;                      /* button hover: the arrow's travel */
  --dur-reveal:1.05s;                    /* scroll reveals */
  --dur-hero:1.2s;                       /* hero entrance */
  --hero-step:190ms;                     /* hero: headline -> sub -> CTA spacing */
  /* Two layers: a tight one for the edge, a wide one for the lift. A single
     wide shadow at this opacity reads as haze rather than as a shadow. Rides
     the ::before, so it fades in and out with the bar. */
  --header-shadow:0 2px 5px rgba(29,22,56,.16), 0 12px 30px rgba(29,22,56,.26);
  --logo-w:289px;                        /* header logo at rest (SVG is 605x185, ratio 3.27) */
  --logo-scale:.6;                       /* condensed size as a fraction of --logo-w */
  --rise:48px;                           /* reveal travel */
  --reveal-scale:.98;
  --stagger:115ms;                       /* per-sibling delay, capped at 4 steps in site.js */
  --header-h:132px;                      /* fixed header allowance for anchor scrolling —
                                            the stuck bar measures 116px (14 + 88px logo + 14),
                                            so this leaves ~16px of air above the target */
}