/* grail.works design system, v1 (2026-10-22).
   The single source of truth for type, color, spacing, radius and motion. Spec and rationale:
   grail/website/site/DESIGN.md. Page styles reference these tokens; they never set their own
   font sizes, families or weights. The check `_tools/qa_design_system.py` fails a page that does. */

:root {
  /* ---- color ---- */
  --c-bg: #0B0F16;            /* page canvas */
  --c-surface: #0E1420;       /* alternate section ground */
  --c-surface-2: #10151E;     /* raised band (test, notes) */
  --c-surface-deep: #080B11;  /* footer */
  --c-line: rgba(244,243,239,.14);
  --c-line-strong: rgba(244,243,239,.24);
  --c-text: #F4F3EF;
  --c-text-2: rgba(244,243,239,.74);   /* body copy on dark */
  --c-text-3: rgba(244,243,239,.62);   /* captions, meta; still WCAG AA at small size */
  --c-gold: #FDB833;          /* brand accent: the wordmark's AI, primary actions, one clause */
  --c-gold-hover: #FFC65A;
  --c-on-gold: #1C2331;       /* text on gold */
  --c-navy: #1C2331;
  --c-blue: #5EA8E0;          /* journey colour: what GRAIL builds (Step 2) */
  --c-teal: #46C8A0;          /* journey colour: the client living with it (Step 3) */
  --c-paper: #FBFAF7;         /* light reading ground (essays) */
  --c-ink: #1C2331;           /* text on paper */

  /* ---- type: three families, six sizes ---- */
  --ff-display: 'Bebas Neue', 'Arial Narrow', sans-serif;   /* display sizes only, always capitals */
  --ff-text: 'Inter', -apple-system, 'Segoe UI', sans-serif;  /* everything else */
  --ff-read: 'Source Serif 4', Georgia, serif;               /* long-form reading only */

  --fs-display-1: clamp(48px, 6.2vw, 88px);   /* the page's one h1 */
  --fs-display-2: clamp(36px, 4.4vw, 56px);   /* section headlines */
  --fs-display-3: clamp(28px, 2.9vw, 36px);   /* sub-headlines inside a section */
  --fs-title: 22px;                            /* lead lines, item titles, emphasised sentences */
  --fs-body: 18px;                             /* all running text */
  --fs-small: 15px;                            /* captions, meta, labels, footer */
  --fs-read: 20px;                             /* essay body (serif) */

  --lh-display: .94;
  --lh-title: 1.35;
  --lh-body: 1.62;
  --lh-read: 1.72;
  --fw-regular: 400;
  --fw-strong: 600;
  --ls-display: .01em;

  /* ---- space: 4px base ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --sp-section: clamp(80px, 10vw, 128px);     /* vertical padding of a section */
  --measure: 64ch;                              /* max line length for running text */
  --wrap: 1120px;

  /* ---- shape and motion ---- */
  --r-pill: 999px;
  --r-card: 12px;
  --r-image: 6px;
  --t-fast: .18s ease;   /* colour and border changes on hover; nothing moves */
}

/* ---- base ---- */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--ff-text); font-size: var(--fs-body); line-height: var(--lh-body); }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-strong); }
b, strong, th { font-weight: var(--fw-strong); }
button, input, select, textarea { font: inherit; }

/* ---- roles (use these, or the tokens directly) ---- */
.t-display-1 { font-family: var(--ff-display); font-size: var(--fs-display-1); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); text-transform: uppercase; font-weight: 400; }
.t-display-2 { font-family: var(--ff-display); font-size: var(--fs-display-2); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); text-transform: uppercase; font-weight: 400; }
.t-display-3 { font-family: var(--ff-display); font-size: var(--fs-display-3); line-height: 1;
  letter-spacing: var(--ls-display); text-transform: uppercase; font-weight: 400; }
.t-title { font-family: var(--ff-text); font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-strong); }
.t-lead { font-family: var(--ff-text); font-size: var(--fs-title); line-height: 1.5; font-weight: var(--fw-regular); }
.t-body { font-family: var(--ff-text); font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small { font-family: var(--ff-text); font-size: var(--fs-small); line-height: 1.5; }

/* ---- components ---- */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border-radius: var(--r-pill);
  font-family: var(--ff-text); font-size: var(--fs-small); font-weight: var(--fw-strong); text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast); }
.btn-primary { background: var(--c-gold); color: var(--c-on-gold); }
.btn-primary:hover { background: var(--c-gold-hover); }
.btn-secondary { border: 1px solid var(--c-line-strong); color: var(--c-text); }
.btn-secondary:hover { border-color: var(--c-gold); }
.link { color: var(--c-gold); font-weight: var(--fw-strong); text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.label { font-family: var(--ff-text); font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--c-text-2); margin: 0 0 var(--sp-3); }
.em { color: var(--c-gold); }   /* one gold clause in a headline: solid colour, never a gradient */

/* the old tracked-capitals eyebrow is retired; any left in a page renders as a plain label */
.eyebrow { font-family: var(--ff-text); font-size: var(--fs-small); font-weight: var(--fw-regular); letter-spacing: 0;
  text-transform: none; color: var(--c-text-2); }
.eyebrow::before { content: none; display: none; }