/* ============================================================
   TOKENS.CSS — BridgePoint Living
   The brand knobs. Every other stylesheet reads these only.
   Palette sampled from Paula's own flyers, logo, and swatches.
   ============================================================ */

:root {

  /* --- BRAND ------------------------------------------------
     Gold is the light in the logo: rules, marks, button fills.
     It is never used for running text (2.9:1 on cream). */
  --gold:        #B3812F;
  --gold-strong: #96691F;   /* hover / pressed                */
  --gold-deep:   #8F6318;   /* gold as *text* on cream, 4.4:1 */
  --gold-lit:    #E0B75C;   /* gold as text on ink, 10:1      */
  --gold-soft:   #F0E2C6;   /* tinted gold ground             */

  --rose:      #C4657A;     /* warmth accent — marks, rules   */
  --rose-deep: #A34A5E;     /* rose as text on cream, 4.8:1   */
  --rose-lit:  #E39AAA;     /* rose as text on ink, 8.5:1     */
  --rose-soft: #F6E3E7;

  /* --- INK & SURFACES --------------------------------------
     The page crosses from ink into cream, the way the brand
     crosses from a hard place into a settled one. */
  --ink:       #14110D;   /* headings, the dark ground        */
  --ink-2:     #3F3830;   /* body copy on cream               */
  --ink-3:     #6B6055;   /* muted / captions on cream        */
  --surface:   #F3EADD;   /* the cream page ground            */
  --surface-2: #FAF5EE;   /* lifted paper                     */
  --surface-3: #EADFCE;   /* inset / field wells              */
  /* True white, and the only place it is used is the cross-band that closes
     each page. --surface-2 was too close to --surface to separate from it
     (#FAF5EE against #F3EADD reads as the same paper), so the band blurred
     into the section above instead of standing apart from it. White is the
     one ground on this site that neither section it sits between is using. */
  --surface-w: #FFFFFF;   /* cross-band only                  */
  --line:      #DDD0BB;   /* hairlines on cream               */

  /* Text tones for use on the ink ground */
  --on-ink:      #F3EADD;
  --on-ink-soft: #C9BCA8;
  --on-ink-mute: #A79A88;
  --line-ink:    #33291D;

  /* --- TYPE -------------------------------------------------
     Cinzel: Roman inscriptional capitals, the same engraved
     character as the BRIDGEPOINT lettering in her logo.
     Karla: warm grotesque, plain-spoken, easy at small sizes. */
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body:    "Karla", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --fw-body:    400;
  --fw-medium:  500;
  --fw-bold:    600;
  --fw-display: 600;

  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.93rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.22vw, 1.14rem);
  --step-1:  clamp(1.22rem, 1.12rem + 0.46vw, 1.5rem);
  --step-2:  clamp(1.5rem,  1.32rem + 0.86vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.62rem + 1.62vw, 2.9rem);
  --step-4:  clamp(2.6rem,  1.95rem + 3.1vw,  4.6rem);

  --leading-tight: 1.06;
  --leading-snug:  1.26;
  --leading-body:  1.62;
  --tracking-tight: -0.015em;
  --tracking-caps:  0.15em;

  /* --- SPACING & RHYTHM ------------------------------------ */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --section-y: clamp(4rem, 7.5vw, 7.5rem);
  --container: 1160px;
  --container-narrow: 720px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  /* --- SHAPE & DEPTH --------------------------------------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20,17,13,.07), 0 2px 6px rgba(20,17,13,.05);
  --shadow:    0 10px 28px rgba(20,17,13,.10), 0 3px 8px rgba(20,17,13,.06);
  --shadow-lg: 0 30px 70px rgba(20,17,13,.20), 0 8px 20px rgba(20,17,13,.10);

  /* Height of the fixed nav bar. Measured, not guessed — 73px at every
     breakpoint (the mark grows on mobile but the toggle and block padding
     keep the bar the same height). It exists as a token because
     `scroll-padding-top` has to match it: the nav is `position:fixed`, so
     without that offset every in-page link scrolls a section to y=0 and the
     nav then covers its heading. **If the nav's padding or mark size ever
     changes, re-measure and update this**, or anchors will start clipping
     again. */
  --nav-h: 73px;

  /* --- MOTION ---------------------------------------------- */
  /* Two scales, deliberately. --dur is the scroll/atmosphere scale: slow is
     correct for something the page does on its own as you move down it (the
     nav's stuck-state fade). --dur-ui is the interaction scale: it answers a
     hover, a press, a focus, so it has to land almost immediately or the
     control feels like it's lagging behind the finger. Don't use --dur for
     anything the visitor triggers directly. */
  --ease:   cubic-bezier(.16, .84, .34, 1);
  --dur:    .7s;
  --dur-ui: .18s;
  /* A third scale, and it exists for exactly one thing: the ghost button's
     gold fill sweeping left to right on hover. --dur-ui (.18s) is correct for
     a colour swap but too fast to read as travel — the sweep has to be seen
     crossing the button or it may as well be an instant fill. .34s is slow
     enough to register as movement and still fast enough to feel like an
     answer to the cursor rather than a wait. Do not reach for this on
     anything that isn't a deliberate, watchable sweep. */
  --dur-fill: .34s;

  /* --- FOCUS ----------------------------------------------- */
  --focus: 0 0 0 3px var(--surface), 0 0 0 5.5px var(--gold-deep);
  --focus-ink: 0 0 0 3px var(--ink), 0 0 0 5.5px var(--gold-lit);
}