/* Canary brand tokens: the ONLY place fonts, sizes, weights and colors are defined.
   Every page links this file. Page CSS, inline styles and scripts use var(--…) and
   never a raw value: no #hex, no rgb()/rgba(), no px font sizes, no numeric weights,
   no font names. `check-brand.py` fails the build if one slips in.

   Need a new color or size? Add it here with a name and a reason, or use the
   nearest existing token. Transparency is color-mix() on a token, e.g.
   color-mix(in srgb, var(--sand-950) 12%, transparent). */
:root {
  /* ══ Fonts ═══════════════════════════════════════════════════════ */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);   /* headlines: same family as body text */
  /* Only inside the mock documents in the illustrations (proposals, RFPs, emails),
     so they read as the client's paperwork, not our UI. */
  --font-doc-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-doc-times: 'Times New Roman', Georgia, serif;
  --font-doc-sans: Arial, 'Liberation Sans', sans-serif;
  --font-hand: 'Caveat', 'Bradley Hand', cursive;   /* the sticky note */

  /* ══ Type scale ══════════════════════════════════════════════════
     Page text uses the ROLE tokens. Pick by role, never by eye:
       display  hero headline, closing headline
       title    every section headline
       heading  item titles: steps, FAQ questions, names, prices
       lead     the one line under a headline
       body     paragraphs, answers, table cells
       small    captions, notes, nav, footer, buttons
       label    eyebrows and kickers (uppercase) */
  --fs-display: clamp(38px, 3.9vw, 60px);  --lh-display: 1.08;  --ls-display: -0.045em;
  --fs-title:   clamp(30px, 3.2vw, 44px);  --lh-title: 1.06;    --ls-title: -0.035em;
  --fs-heading: clamp(18px, 1.5vw, 21px);  --lh-heading: 1.3;   --ls-heading: -0.015em;
  --fs-lead:    clamp(17px, 1.35vw, 19px); --lh-lead: 1.55;     --ls-lead: -0.008em;
  --fs-body:    var(--size-16);            --lh-body: 1.6;
  --fs-small:   var(--size-14);            --lh-small: 1.45;
  --fs-label:   var(--size-12);            --ls-label: 0.1em;
  --fs-stat:    clamp(112px, 15vw, 208px); /* the one oversized number */

  /* Fixed size ramp: the small type inside the illustrations (mock emails, files,
     proposal pages) plus the role tokens above. Nothing in between. */
  --size-9: 9px;
  --size-10: 10.5px;
  --size-11: 11.5px;
  --size-12: 12px;
  --size-13: 13px;
  --size-14: 14px;
  --size-15: 15px;
  --size-16: 16px;
  --size-18: 18px;
  --size-21: 21px;
  --size-24: 24px;
  --size-30: 30px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-strong: 600;   /* headings, buttons, labels */
  --fw-bold: 700;     /* wordmark, tiny badges only */

  /* ══ Color: two ramps and three status colors. That is the whole palette. ══ */

  /* Sand: warm neutrals, light to dark */
  --sand-0: #ffffff;
  --sand-50: #fffdf8;    /* mock document paper */
  --sand-100: #faf8f3;   /* page background */
  --sand-200: #f3efe7;   /* soft fills, footer */
  --sand-300: #ece6dc;   /* rules inside mocks */
  --sand-400: #e4dccd;   /* hero desk */
  --sand-500: #cfc9c1;   /* dashed borders */
  --sand-600: #b9b2ab;
  --sand-700: #8f887f;
  --sand-750: #746d66;
  --sand-800: #5f5a54;
  --sand-850: #4a4540;
  --sand-900: #2a2622;
  --sand-950: #14110f;   /* ink */

  /* Canary yellow (from the bird) */
  --yellow-100: #fff6c2;
  --yellow-200: #ffe45c;
  --yellow-300: #f9d200;  /* THE brand color */
  --yellow-400: #e8c200;
  --yellow-500: #cfae2c;
  --yellow-900: #6e5600;  /* yellow text, readable on white */

  /* Status: only for meaning (go / no-go, file types, selection), never decoration */
  --green: #2f6b3a;
  --red: #d93b30;
  --blue: #2f6ae0;

  /* ══ Semantic names: use these in page UI ════════════════════════ */
  --ink: var(--sand-950);
  --paper: var(--sand-100);
  --surface: var(--sand-0);          /* cards and sheets on the page */
  --yellow: var(--yellow-300);
  --yellow-soft: var(--yellow-100);
  --yellow-ink: var(--yellow-900);
  --line: color-mix(in srgb, var(--sand-950) 10%, transparent);

  /* Text: three levels of attention */
  --text-1: var(--sand-950);   /* headlines and anything you must read */
  --text-2: var(--sand-800);   /* supporting copy: subtitles, answers */
  --text-3: var(--sand-750);   /* captions, labels, sources (AA on --paper) */
  --on-dark-1: var(--sand-0);  /* the same three levels on --ink backgrounds */
  --on-dark-2: var(--sand-600);
  --on-dark-3: var(--sand-700);

  /* ══ Space: one scale for every padding, margin and gap ══════════
     4px grid. Use the next step up when in doubt: air reads as quality.
     Only 0 and a 1px hairline may be written raw. */
  --space-0: 2px;     /* hairline nudges: badge padding, underline offsets */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* Layout rhythm: every section uses these, so the page breathes evenly */
  --section-y: clamp(88px, 10vw, 136px);     /* top and bottom of every section */
  --head-gap: clamp(40px, 4.5vw, 64px);      /* headline block → section content */
  --sub-gap: var(--space-4);                 /* headline → its lead line */
  --gutter: clamp(16px, 4vw, 48px);          /* page side padding */
  /* Side padding for full-width bars (nav, footer) so their edges line up with the content column */
  --edge: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  --content-max: 1180px;                     /* the content column, same on every section */
  --page-max: calc(var(--content-max) + 2 * var(--gutter));  /* a padded section box */
  --narrow-max: 760px;                       /* FAQ, long text */
  --nav-h: 78px;                             /* fallback until the page measures the nav (--nav-real) */

  /* ══ Glass (nav, menu) ═══════════════════════════════════════════ */
  --glass-bg: color-mix(in srgb, var(--sand-100) 86%, transparent);
  --glass-border: color-mix(in srgb, var(--sand-0) 60%, transparent);
  --glass-blur: blur(28px) saturate(160%);

  color-scheme: light;
}