/*
  IHPI design tokens: the single source for color and type on the website and
  in the report. Load before every other stylesheet. DESIGN.md documents the
  meaning of each step; /report shows them rendered.

  Each brand hue has five steps:
    -tint    faint panel or row fill
    -soft    opener, callout, and insight backgrounds
    (base)   the brand color: fills, bars, diagram boxes
    -strong  chart marks and lines (≥ 3:1 on paper)
    -deep    text, labels, and numbers in that hue (≥ 4.5:1 on paper and -soft)
*/
:root {
  /* Neutrals */
  --ink: #1e2023;
  --ink-soft: #343e42;      /* running text */
  --muted: #52656b;         /* metadata, captions, chapter numbers */
  --paper: #fbfaf7;         /* report page */
  --paper-deep: #f2efe8;    /* quiet panels on the page */
  --canvas: #e9e7e1;        /* desk behind the page */
  --neutral: #f7f6f4;       /* brand off-white: the website background */
  --surface: #ffffff;       /* website cards and form fields */
  --rule: #d3d0c8;
  --shadow: 0 20px 55px rgb(30 32 35 / 9%);

  /* Sky: evidence, the primary route, measured emphasis */
  --sky-tint: #eef4f9;
  --sky-soft: #d5e3ed;
  --sky: #a7c7df;
  --sky-strong: #5b8fb5;
  --sky-deep: #2f5f7f;

  /* Sage: policy, systems, and supporting infrastructure */
  --sage-tint: #f0f3eb;
  --sage-soft: #dce3d2;
  --sage: #c7d2b8;
  --sage-strong: #7f9468;
  --sage-deep: #4f5f3c;

  /* Blush: people, lived experience, and risk that needs attention */
  --blush-tint: #f8f0f3;
  --blush-soft: #ecdee3;
  --blush: #e9d2dc;
  --blush-strong: #a57b8e;
  --blush-deep: #74505f;

  /* Slate (brand blue grey): context, neutral categories, keys */
  --slate-tint: #f0f2f1;
  --slate-soft: #e0e3df;
  --slate: #9babaf;
  --slate-strong: #74929a;
  --slate-deep: #52656b;

  /* Roles. Use these in components rather than a hue directly. */
  --accent: var(--sky-deep);          /* links, hover, list markers, focus, quotes */
  --accent-soft: var(--sky-tint);
  --number: var(--slate-deep);        /* chapter and note numbers, running heads */
  --editorial: var(--blush-deep);     /* internal draft-only markers; never in the published edition */
  --editorial-soft: var(--blush-soft);
  --focus: var(--sky-deep);

  /* Type */
  --font-display: "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale (rem). Nothing smaller than --text-2xs in running layouts. */
  --text-2xs: 0.6875rem;   /* 11px  labels, kickers, table heads */
  --text-xs: 0.75rem;      /* 12px  figure notes, metadata */
  --text-sm: 0.8125rem;    /* 13px  captions, table cells */
  --text-md: 0.875rem;     /* 14px  report body (print and desktop) */
  --text-base: 1rem;       /* 16px  mobile body, UI */
  --text-lg: 1.25rem;      /* 20px  lead text, small serif headings */
  --text-xl: 1.5rem;       /* 24px  H4 serif */
  --text-2xl: 2rem;        /* 32px  section heading */
  --text-3xl: 2.5rem;      /* 40px  large section heading */
  --text-4xl: 3.5rem;      /* 56px  chapter title */
  --text-5xl: 4.5rem;      /* 72px  opener numbers, cover-scale display */

  --tracking-label: 0.12em;
}