/*
 * Every value the other stylesheets use. The only file allowed raw hex.
 * Source of truth: DESIGN.md §2-§4.
 */
@layer tokens {
  :root {
    /* Palette (site) */
    --color-ink: #141415;
    --color-text: #27272a;
    --color-graphite: #3c3c3e;
    --color-muted: #4e4e55;
    --color-subtle: #78787d;
    --color-line: #cacace;
    --color-surface-2: #e9e9ec;
    --color-surface: #f4f4f6;
    --color-paper: #ffffff;
    --color-sand: #efebe7;
    --color-lime: #defb4b;
    --color-orange: #ea8c47;
    --color-forest: #285c52;
    --color-forest-dark: #224e45;
    --color-mint: #daece8;

    /* Semantic roles */
    --color-action: var(--color-lime);
    --color-positive: var(--color-forest);
    --color-positive-surface: var(--color-mint);
    --color-attention: var(--color-orange);
    --color-attention-surface: #fbe3d1;
    --color-negative: #b42318;
    --color-negative-surface: #fde7e5;
    --color-focus: var(--color-text);

    /* Action links: the classic W3C/browser default link colours. */
    --color-link: #0000ee;
    --color-link-visited: #551a8b;

    /* Overlays: dialogs only (DESIGN.md §4.4) */
    --color-backdrop: rgb(20 20 21 / 0.4);
    --shadow-overlay: 0 1.5rem 4rem rgb(20 20 21 / 0.18);

    /* Type */
    --font-display: "VC Henrietta", Georgia, serif;
    --font-text: "Onest", system-ui, sans-serif;
    --font-mono: "Fragment Mono", ui-monospace, monospace;

    --text-display-l: 3rem / 3.5rem var(--font-display);
    --text-display-m: 2rem / 2.5rem var(--font-display);
    --text-title: 500 1.25rem / 1.75rem var(--font-text);
    --text-lead: 500 1.125rem / 1.625rem var(--font-text);
    --text-body: 400 1rem / 1.5rem var(--font-text);
    --text-body-strong: 500 1rem / 1.5rem var(--font-text);
    --text-small: 400 0.875rem / 1.25rem var(--font-text);
    --text-caption: 500 0.75rem / 1.125rem var(--font-text);
    --text-eyebrow: 600 0.75rem / 1.125rem var(--font-text);
    --tracking-eyebrow: 0.2em;

    /* Space: 4px base */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 4rem;
    --space-10: 5rem;

    /* Shape */
    --radius-xs: 2px;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 24px;
    --border: 1px solid var(--color-line);
    --rule: 1px solid var(--color-text);

    /* Layout */
    --width-page: 75rem;
    --width-reading: 45rem;
    --control-height: 2.5rem;
    /* The sticky banner: its padding, one nav link's height, its hairline. */
    --app-header-height: calc(var(--space-4) * 2 + var(--control-height) + 1px);
  }
}