/* =========================================================================
   Ian Randolph — Design tokens (single source of truth)
   Colour + type primitives for the whole site. Load this FIRST, before
   type.css and styles.css, so every var() downstream resolves.

   Brand constraints (see brand-style-guide.md): warm paper, near-black ink,
   ONE disciplined indigo accent, contemporary serif over a clean grotesque,
   lots of air. Never SaaS-blue, never a gradient, never a second accent.

   NOTE: assets/tokens.json mirrors these values in W3C DTCG format for
   Figma / Style Dictionary import. Keep the two in sync by hand — if you
   change a value here, change it there.
   ========================================================================= */

:root {
  /* ---- Colour: paper -------------------------------------------------- */
  --bg:          #F6F2EA;  /* page background. warm bone, not stark white */
  --surface:     #FBF9F4;  /* cards / raised panels. use sparingly */

  /* ---- Colour: ink ---------------------------------------------------- */
  --ink:         #17150F;  /* primary text. warm near-black, not pure #000 */
  --ink-muted:   #6B675E;  /* secondary text, captions, credential lines */
  --ink-faint:   #908B80;  /* finest captions, quiet rules */

  /* ---- Colour: accent (the single indigo, locked) -------------------- */
  --accent:        #2E2A5C;  /* links, key emphasis, one hero element */
  --accent-hover:  #403A7A;  /* interactive hover / active */
  --on-accent:     #F4F1FB;  /* text on an indigo fill (e.g. primary button) */
  --on-accent-strong: #ffffff; /* text on indigo at hover, for extra contrast */
  --accent-underline: rgba(46, 42, 92, 0.28); /* link / textlink underline */
  --selection:     rgba(46, 42, 92, 0.14);    /* ::selection highlight */
  --accent-wash:   0.10;     /* opacity of the indigo overlay on the portrait */

  /* ---- Colour: lines -------------------------------------------------- */
  --hairline:        #E2DCD0;  /* borders, rules, dividers */
  --hairline-strong: #D4CCBC;  /* stronger dividers, ghost-button border */

  /* ---- Type: families ------------------------------------------------- */
  /* serif = ideas, rigour, the book. sans = modern, AI-fluent, unstuffy.
     Hard no: Inter as the personality face. */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Type: fluid scale (clamp = mobile .. desktop) ------------------ */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.0rem, 0.96rem + 0.2vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2.0rem, 1.6rem + 2vw, 3.1rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);

  /* semantic size aliases over the scale (use these by intent in new work;
     the --step-* names stay for the existing component CSS) */
  --size-meta:     var(--step--1); /* eyebrows, captions, nav */
  --size-body:     var(--step-0);  /* default reading copy */
  --size-lead:     var(--step-1);  /* decks, subheads */
  --size-title:    var(--step-2);  /* section heads */
  --size-headline: var(--step-3);  /* large headings */
  --size-display:  var(--step-4);  /* hero statements */
  /* hero/statement display size, between headline and display. Used by the
     hero headline and the POV / "why me" statements. */
  --size-hero:     clamp(2.3rem, 1.6rem + 3vw, 3.7rem);

  /* ---- Type: line-height --------------------------------------------- */
  --leading-display: 1.02; /* hero serif, tightest */
  --leading-hero:    1.06; /* statement thesis (POV section) */
  --leading-hero-headline: 1.13; /* hero headline: loosened so the 3 lines breathe */
  --leading-tight:   1.08; /* headings */
  --leading-snug:    1.25; /* sans heads, pull quotes */
  --leading-quote:   1.34; /* serif testimonial / pull quotes */
  --leading-deck:    1.45; /* decks / subheads */
  --leading-body:    1.65; /* body copy */

  /* ---- Type: tracking ------------------------------------------------- */
  --tracking-display: -0.02em; /* large serif */
  --tracking-tight:   -0.01em; /* headings, wordmark */
  --tracking-normal:   0;
  --tracking-wide:     0.14em; /* uppercase column headers, year labels */
  --tracking-label:    0.16em; /* uppercase eyebrow labels */

  /* ---- Type: weight --------------------------------------------------- */
  --weight-light:    360; /* quiet serif: aphorisms, quotes, pull quotes */
  --weight-body:     400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-display:  420; /* Fraunces display setting (between book & regular) */

  /* Fraunces variable-font axes (0 = regular serifs; raise for softer/wonkier) */
  --fraunces-soft: 0;
  --fraunces-wonk: 0;

  /* ---- Radius --------------------------------------------------------- */
  /* small and restrained: no SaaS pills. The avatar circle stays a literal
     50% (it is geometric, not a brand radius). */
  --radius-control: 3px;  /* buttons, skip link, portrait image */
  --radius-panel:   4px;  /* raised panels */
  --radius-card:    14px; /* testimonial cards */

  /* ---- Layout & rhythm ------------------------------------------------ */
  --measure: 64ch;   /* max readable line length */
  --maxw: 1120px;    /* page container */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
}