/* ============================================================
   YLPP PRODUCTION — DESIGN TOKENS
   The Working Ledger system. Single source of truth for colour,
   type roles and spacing. Change values here, not in components.
   ============================================================ */

:root{
  /* ---- brand colour (official) ---- */
  --c-navy:      #0F2D52;
  --c-teal:      #107C8C;
  --c-teal-lt:   #5FB9C4; /* teal legible on navy */
  --c-gold:      #D9A441;
  --c-grey:      #6B7280;
  --c-white:     #FFFFFF;
  --c-rust:      #B5502E; /* form validation only — a muted, on-system warm tone, deliberately not a bright alarm red */

  /* ---- editorial neutrals (approved website interpretation) ---- */
  --c-ink:       #16233A;
  --c-cream:     #F7F3EA;
  --c-cream-alt: #F0EAD9;

  /* ---- type roles ----
     sans  = geometric/humanist — headlines, nav, service titles, UI
     serif = editorial — reflective copy, founder voice, emphasis
     mono  = labels, numbers, process stages, credentials, pricing   */
  --font-sans: 'Space Grotesk', 'Neue Montreal', sans-serif;
  --font-serif: 'Newsreader', 'Source Serif 4', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- spacing scale ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 44px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---- layout ---- */
  --shell-max: 1280px;
  --shell-pad: 40px;
  --shell-pad-mobile: 22px;
  --radius: 2px; /* the system is square-edged by design — kept for the rare exception */

  /* ---- motion timing (see js/motion.js) ---- */
  --ease-draw: cubic-bezier(.3,.7,.25,1);
  --ease-settle: cubic-bezier(.22,.8,.32,1);
  --ease-reveal: cubic-bezier(.2,.65,.2,1);
  --t-fast: .3s;
  --t-med: .5s;
  --t-slow: .9s;
}

/* ---- section colour modes ----
   Every section commits to one of these two. Components read the
   --line / --line-strong / --teal-acc / --btn-* custom properties
   rather than hardcoding colour, so the same component markup works
   unchanged against either background. */
.mode-navy{
  background:var(--c-navy); color:#F2ECDD;
  --line: rgba(242,236,221,.16);
  --line-strong: rgba(242,236,221,.4);
  --teal-acc: var(--c-teal-lt);
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-navy);
  --ink: #F2ECDD;
}
.mode-cream{
  background:var(--c-cream); color:var(--c-ink);
  --line: #E4DAC2;
  --line-strong: #B7AD93;
  --teal-acc: var(--c-teal);
  --btn-bg: var(--c-navy);
  --btn-fg: var(--c-cream);
  --ink: var(--c-ink);
}
.mode-cream.alt{ background:var(--c-cream-alt); }