/*
 * The safety vest — the single source of truth for colour.
 *
 * Every colour in every service comes from these tokens. Nothing else declares
 * a raw hex: change a value here and it lands everywhere, and an uploaded
 * theme file overrides these same names.
 *
 * Values are literal hex rather than aliases of one another, because this
 * block is also what gets exported to a designer as a DTCG document — a
 * var(--something) would be useless in Figma.
 *
 * Three theme states, as the layout's pre-paint script expects:
 *   :root                                      light, the complete set
 *   @media dark + :root:not([data-theme=light])  dark, following the OS
 *   :root[data-theme="dark"]                   dark, chosen explicitly
 */

:root {
  color-scheme: light;

  /* Surfaces — asphalt is the dark ground; light is the paper the vest lies on */
  --bg: #f7f9fa;
  --surface: #ffffff;
  --border: #d5dade;

  /* Text */
  --text: #14161a;
  --text-muted: #5a6169;

  /* Hi-vis fluorescent yellow — the vest fabric.
     --on-accent is what sits on top of it, and it is always the dark one:
     black on this yellow is ~18:1, white on it is ~1.1:1 and illegible. */
  --accent: #e4ff1a;
  --accent-deep: #c2d913;
  --on-accent: #14161a;

  /* Retroreflective stripe */
  --stripe-light: #d9dde0;
  --stripe-dark: #3a4049;

  /* Historical texts read as paper and ink, so the two eras stay distinct */
  --paper: #f4efe3;
  --paper-text: #2e2a22;
  --paper-border: #ddd2ba;

  /* Status */
  --error: #b3261e;
  --warn: #8a6100;
  --good: #1f6b3a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #14161a;
    --surface: #22262c;
    --border: #3a4049;
    --text: #f7f9fa;
    --text-muted: #9aa3ab;
    --accent: #e4ff1a;
    --accent-deep: #c2d913;
    --on-accent: #14161a;
    --stripe-light: #d9dde0;
    --stripe-dark: #3a4049;
    --paper: #26231d;
    --paper-text: #e4dcc9;
    --paper-border: #423c30;
    --error: #ff8a80;
    --warn: #ffc65c;
    --good: #7ddb9e;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14161a;
  --surface: #22262c;
  --border: #3a4049;
  --text: #f7f9fa;
  --text-muted: #9aa3ab;
  --accent: #e4ff1a;
  --accent-deep: #c2d913;
  --on-accent: #14161a;
  --stripe-light: #d9dde0;
  --stripe-dark: #3a4049;
  --paper: #26231d;
  --paper-text: #e4dcc9;
  --paper-border: #423c30;
  --error: #ff8a80;
  --warn: #ffc65c;
  --good: #7ddb9e;
}

/* Structure.
 *
 * These live in their own block, after the palette, for two reasons: the
 * colour parser and the DTCG colour export must see colours only, and
 * structure does not vary between light and dark. A palette has two modes; a
 * corner radius has one value.
 *
 * Palette and structure are selected independently, so a designer can work on
 * one without touching the other. */
:root {
  /* Shape */
  --radius: 6px;
  --border-width: 1px;

  /* Rhythm */
  --space-xs: 0.375rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  /* Density */
  --card-padding-y: 1rem;
  --card-padding-x: 1.125rem;
  --grid-min: 280px;
  --measure: 68ch;

  /* The page container. Wide enough to set a reading column beside something
     else — the submission form with the examples next to it rather than a
     screen below — and still bounded, because a line of text stretched across
     an ultrawide monitor is not a line anybody reads.

     One number, used by the masthead, the navigation, the body and the footer
     alike. It was four copies of 1100px, which is how a header and its page
     drift apart. */
  --page: 1440px;

  /* The gutter between the content and the edge of the window.
   *
   * It is not a fixed 20px, and that is the whole point. A container that
   * merely centres itself does nothing at all until the window is wider than
   * it is — below that the content sits flush against both edges, which reads
   * as a page pinned to the glass rather than a page laid out on it. Growing
   * the gutter with the window means the content is visibly inset and
   * symmetric at every size, and the centring is something you can see rather
   * than something the stylesheet merely claims.
   *
   * Floored at 1.25rem so a phone keeps a thumb's worth of margin, capped so
   * a very wide window does not spend half itself on nothing.
   */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* Type */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-historical: Georgia, "Iowan Old Style", serif;
  --font-size: 16px;
  --line-height: 1.6;
  --title-weight: 800;
  --title-tracking: -0.02em;
}