/* ============================================================
   FLIBBR DESIGN TOKENS
   Transcribed verbatim from locked canonical
   `flibbr-design-mockup-final-homepage.html` :root block.

   Source-of-truth hierarchy (architecture v2 §0):
   locked canonicals → architecture-v2 → theme code.
   If this file and a canonical disagree, the canonical wins.
   ============================================================ */

:root {
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* colour — Stage 3 locked (29 Apr 2026); palette swap warm→cool v0.5.99 (12 May 2026).
     Warm-black typography retained for "quiet confidence"; page chrome moves to pure-white
     + cool-neutral hovers/rules. Cascades to every theme surface via ~130 var() references. */
  --ink:        #141413;   /* warm-black, primary text */
  --ink-soft:   #3a3936;   /* body prose */
  --ink-quiet:  #6e6c66;   /* metadata, captions */
  --paper:      #ffffff;   /* pure-white page background (was #fafaf7) */
  --paper-warm: #f5f5f5;   /* cool-neutral hover / extract-panel fill (was #f3f1ea) */
  --rule:       #d1d1d1;   /* cool-neutral hairlines / card edges (was #d8d5cc) */
  --rule-soft:  #ededed;   /* cool-neutral section dividers (was #e8e5dc) */
  --accent:     #2a2566;   /* ink-violet, single accent — unchanged.
                              used: kickers, link hover, focus rings, issue tag.
                              NOT used: cohort tags, button fills, decorative chrome. */
  --rust:       #b8431f;   /* v0.5.99: secondary editorial-eyebrow accent.
                              used: .v2-eyebrow, .offering-eyebrow, .happening-tag,
                              v4-card hover states (.case-tag, .work-tile-meta,
                              .fl-role, .happening-link on hover).
                              NOT used: structural chrome, ink prose. */

  /* spacing — Stage 4 locked (29 Apr 2026)
     --s-3 (12px) and --s-5 (24px) carry most of the load by design. */
  --s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px;
  --s-5:  24px; --s-6:  32px; --s-7:  48px; --s-8:  64px;
  --s-9:  96px;

  /* layout — Stage 4 locked */
  --measure: 65ch;     /* prose measure */
  --max-w:   1280px;   /* main container max width */
  --gutter:  clamp(1rem, 4vw, 3rem);  /* 16px → 48px, 4vw growth */

  /* breakpoints — Stage 4 locked
     mobile:  default, no media query (mobile-first)
     tablet:  @media (max-width: 880px) — large asymmetric grids collapse
     small:   @media (max-width: 540px) — final collapse to single column
     nav:     @media (max-width: 1023.98px) — drawer pattern (architecture v2 §7.2 — NEW)
     Intermediate 720px queries kept where they do real work
     (cohort row, work cards) — not formal breakpoints. */

  /* image treatment — Stage 5 locked (29 Apr 2026)
     Applied to all Flibbrati portraits: warm monochrome conversion,
     7% paper tint overlay, 4% vignette, enhanced contrast. */

  /* motion & timing — Stage 6 locked (29 Apr 2026) */
  --motion-duration-ui:      160ms;   /* button hover, form focus, UI feedback */
  --motion-duration-content: 280ms;   /* card hover, section reveals */
  --motion-duration-page:    400ms;   /* page transitions, major state changes */

  --motion-ease-ui:      cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* easeOutQuad */
  --motion-ease-content: cubic-bezier(0.23, 1, 0.32, 1);       /* easeOutQuart */
  --motion-ease-page:    cubic-bezier(0.19, 1, 0.22, 1);       /* easeOutExpo */

  /* reduced motion support — respects user preferences */
  --motion-ok: 1;

  /* layout — scroll offset for in-page anchor jumps (v0.5.40, retuned v0.5.41 — closes #223 + #226)
     Sticky header height varies by viewport: ~56px (mobile masthead only,
     <1024px) to ~119px (desktop two-row nav, ≥1024px, measured live).
     clamp() upper bound 140px = ~119px header + ~21px breathing-room gap
     above the targeted heading after scroll. */
  --scroll-padding-y: clamp(56px, 10vw, 140px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-ui: 0ms;
    --motion-duration-content: 0ms;
    --motion-duration-page: 0ms;
    --motion-ok: 0;
  }
}