/* ============================================================================
   DESIGN SYSTEM — TOKENS
   Loaded on every page. Contains no selectors that produce visual output, so
   it is safe site-wide from day one: a custom property does nothing until
   something consumes it.

   This is the only file where a raw hex value, font name, px size or spacing
   number may be written. Every other stylesheet references these.
   ============================================================================ */

:root {

  /* --- TYPEFACE ----------------------------------------------------------
     Change the family here and everything that consumes the token follows.
     Figtree is the closest free match to the reference layout. Alternatives
     that sit in the same slot: 'Plus Jakarta Sans', 'Outfit', 'Sofia Pro'. */
  --font-display: 'Figtree', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Figtree', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* --- TYPE SCALE (fluid) ------------------------------------------------
     One scale for the whole site. Templates pick a step; they never invent a
     px value. The clamp() min applies at 320px, the max at roughly 1200px. */
  --fs-h1:   clamp(2rem,    1.35rem + 2.70vw, 3rem);      /* 32 → 48 */
  --fs-h2:   clamp(1.5rem,  1.18rem + 1.35vw, 2.125rem);  /* 24 → 34 */
  --fs-h3:   clamp(1.19rem, 1.07rem + 0.50vw, 1.3125rem); /* 19 → 21 */
  --fs-h4:   clamp(1.06rem, 1.02rem + 0.20vw, 1.09rem);   /* 17 → 17.5 */
  --fs-lead: clamp(1.06rem, 0.98rem + 0.35vw, 1.25rem);   /* 17 → 20 */
  --fs-body: clamp(1rem,    0.96rem + 0.20vw, 1.125rem);  /* 16 → 18 */
  --fs-sm:   0.9375rem;   /* 15 */
  --fs-xs:   0.8125rem;   /* 13 */

  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-body:    1.65;
  --lh-loose:   1.80;

  --tracking-tight: -0.02em;
  --tracking-wide:   0.06em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* --- COLOUR -------------------------------------------------------------
     --ink-muted and --ink-faint were darkened from the original theme values,
     which sat around 2.9:1 on white and failed WCAG AA for body text. */
  --ink:           #111111;
  --ink-soft:      #3a3a3a;
  --ink-muted:     #5c5c5c;
  --ink-faint:     #767676;

  --paper:         #ffffff;
  --paper-warm:    #faf8f4;
  --paper-cream:   #f5f0e8;
  --paper-tint:    #f3f3f7;

  --tan:           #e8ddc8;
  --border:        #e0dbd0;
  --border-strong: #c8c0b0;

  --accent:        #2563eb;
  --accent-ink:    #ffffff;
  --success:       #2e7d32;
  --linkedin:      #0a66c2;

  /* --- SPACE (4px base) --------------------------------------------------- */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;  --space-4:  16px;
  --space-5:  20px;  --space-6:  24px;  --space-8:  32px;  --space-10: 40px;
  --space-12: 48px;  --space-14: 56px;  --space-16: 64px;  --space-20: 80px;

  /* --- LAYOUT -------------------------------------------------------------- */
  --page-max:    1220px;
  --content-max: 720px;   /* reading measure, ~70ch at --fs-body */
  --col-toc:     210px;
  --col-rail:    260px;
  --gutter:      60px;
  --page-pad:    24px;

  /* Overridden per-site by bc_header_height_token() in functions.php.
     Every sticky offset and anchor jump derives from it. */
  --header-h:   72px;
  --sticky-top: calc(var(--header-h) + var(--space-6));

  /* --- RADIUS / SHADOW / MOTION -------------------------------------------- */
  --radius:      12px;
  --radius-sm:    8px;
  --radius-pill: 50px;

  --shadow:    0 2px 16px rgba(17,17,17,0.07);
  --shadow-lg: 0 8px 36px rgba(17,17,17,0.12);

  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.18s;
  --dur:      0.28s;
  --dur-slow: 0.55s;
}