/* Frameroots design tokens. Source of truth: docs/design-system.md */

:root {
  /* Colour: neutrals */
  --paper: #F4F4EF;        /* page background */
  --paper-2: #EAEAE3;      /* raised / subtle fill */
  --line: #D3D5CB;         /* hairlines on paper */

  /* Colour: green (leads) */
  --green-900: #0F261D;    /* deepest text, button hover */
  --green-800: #1D3B2E;    /* brand green: primary text, symbol, buttons */
  --green-600: #2F5A46;
  --green-400: #6F8F7E;
  --green-100: #DCE5DF;
  --muted: #5B6B62;        /* secondary text (5.1:1 on paper) */

  /* Colour: orange (accent, <=5% of any view) */
  --orange-600: #D9501C;   /* graphics + large text only (3.7:1 on paper) */
  --orange-700: #B84013;   /* small orange text, focus rings (5.1:1 on paper) */
  --orange-100: #F8E1D6;

  /* Semantic aliases */
  --bg: var(--paper);
  --text: var(--green-800);
  --text-strong: var(--green-900);
  --text-muted: var(--muted);
  --accent: var(--orange-600);
  --accent-text: var(--orange-700);
  --focus: var(--orange-700);
  --error: #A3261B;
  --success: var(--green-600);

  /* Type */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: min(clamp(3rem, 1.6rem + 7vw, 8.5rem), 14svh); /* svh cap keeps 3 lines on one screen */
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --lh-display: 0.92;
  --lh-tight: 1.2;
  --lh-body: 1.55;
  --track-display: -0.035em;
  --track-label: 0.08em;

  /* Space (4px base) */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-6: 1.5rem;   --s-8: 2rem;    --s-12: 3rem;   --s-16: 4rem;
  --s-24: 6rem;    --s-32: 8rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);   /* page side margin */
  --col-gap: 1.5rem;
  --max-w: 90rem;

  /* Shape + motion */
  --radius: 0;
  --rule: 1px solid var(--green-800);
  --hairline: 1px solid var(--line);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 600ms;
}