/*
  tokens.css: every design value on the site lives here.
  Load order: tokens, base, components, pages.
  No dark mode and no theme switching. The brand is ink on paper, always.
*/

:root {
  /* Colour: exactly these eight. No hex values anywhere else in the CSS. */
  --paper: #F4EFE6;            /* background everywhere */
  --ink: #1F1715;              /* text everywhere */
  --accent: #E8431F;           /* only the period disc, fund figures, underlines, links */
  /*
    Accent on paper is 3.49:1 (npm run lint:contrast). It fails WCAG AA for normal text.
    Accent text is allowed only at 24px (1.5rem) and up at regular weight,
    or 18.66px (1.1667rem) and up at weight 700 or heavier.
    Never set captions, body copy or labels in accent. Accent lines, rules and
    the disc are non-text and pass the 3:1 minimum.
  */
  --flavour-bitter: #C8922A;   /* Not Bitter, ochre. Paper text fails here: use ink text */
  --flavour-finished: #6E1F2B; /* Not Finished, oxblood */
  --flavour-quiet: #1E4D3B;    /* Not Quiet, bottle green */
  --flavour-tired: #3B2A22;    /* Not Tired, deep brown */
  --grey: #6B625C;             /* captions and sources only */

  /* Type families. The fallback faces are metric-matched in base.css. */
  --font-head: "Bricolage Grotesque", "Bricolage Fallback Archivo", "Bricolage Fallback Impact",
    "Bricolage Fallback Arial", "Archivo Black", Impact, "Arial Black", sans-serif;
  --font-body: "Source Serif 4", "Source Serif Fallback Georgia", "Source Serif Fallback Times",
    Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale */
  --step-hero: clamp(3rem, 8vw + 1rem, 8.75rem); /* 48px on phones up to 140px on desktop */
  --step-h2: 2.5rem;       /* 40px */
  --step-h3: 1.5rem;       /* 24px */
  --step-body: 1.125rem;   /* 18px */
  --step-caption: 0.8125rem; /* 13px */

  /* Line heights */
  --leading-hero: 0.95;
  --leading-heading: 1.05;
  --leading-body: 1.5;

  /* Tracking */
  --tracking-head: -0.02em;
  --tracking-wordmark: -0.04em; /* letters almost touch; matches wordmark.svg */

  /* Spacing, 4px base */
  --space-1: 0.25rem;  /*   4px */
  --space-2: 0.5rem;   /*   8px */
  --space-3: 0.75rem;  /*  12px */
  --space-4: 1rem;     /*  16px */
  --space-5: 1.5rem;   /*  24px */
  --space-6: 2rem;     /*  32px */
  --space-7: 2.5rem;   /*  40px */
  --space-8: 3rem;     /*  48px */
  --space-9: 4rem;     /*  64px */
  --space-10: 5rem;    /*  80px */
  --space-11: 7.5rem;  /* 120px */
  --space-12: 10rem;   /* 160px */

  /* Layout */
  --measure: 62ch;      /* body text line length */
  --container: 75rem;   /* 1200px */
  --gutter: var(--space-4);

  /* Shape: nothing on this site is rounded except the disc */
  --radius: 0;
  --rule: 2px;          /* borders and underlines */
  /*
    The period disc, relative to the font size it ends. These three match
    public/img/wordmark.svg; npm run build:wordmark warns if they drift.
  */
  --disc-size: 0.24em;  /* about 18 % larger than Bricolage's own period */
  --disc-gap: 0.1em;    /* space after the last letter's tracking, before the disc */
  --disc-drop: 0.01em;  /* sinks below the baseline like the font's round glyphs */

  /* Motion */
  --blink-half: 530ms;  /* one half of a cursor blink: on, or off */
  --ease: ease-out;
  --duration-ui: 120ms; /* hover and focus changes */
}