/*
 * The whole visual system, as custom properties.
 *
 * ## The palette: "Deep Field"
 *
 * The name has two halves that pull in opposite directions, and the palette is
 * the attempt to hold both.
 *
 * **Matter** is the midnight — `#111621` as ink in light mode, and the whole
 * ground in dark. Not black and not grey: an ink with blue in it, which is
 * what mass and depth look like and what a pure neutral never manages. Dark
 * matter is the unseen thing that holds galaxies together, which is also a
 * fair description of a holding company.
 *
 * **Ark** is the brass. `--accent` is the one warm thing in an otherwise cold
 * palette — fittings on a hull, a lamp, something carried through the dark.
 *
 * The accent appears in exactly three places: the mark, the current page in
 * the masthead, and a link on hover. That restraint is deliberate and worth
 * knowing before changing anything here — the ink and the paper do nearly all
 * the work, and swapping the accent for another colour would barely show.
 *
 * ## The rest follows from "site, not app"
 *
 * - **Paper, not surfaces.** One ground for the whole site; the masthead and
 *   the footer sit on the same sheet as the text. The card stack (ground →
 *   surface → raised, each with a border, a radius and a shadow) is dashboard
 *   vocabulary; a document has a sheet of paper and rules drawn on it.
 * - **Rules, not boxes.** `--rule` is the only structural device. There is no
 *   `--radius` token at all, which is the cheapest way to guarantee nothing
 *   grows rounded corners later.
 * - **Real typographic contrast.** An app sets everything between 14 and 17px
 *   and separates it with boxes. A site separates it with size: 70px titles
 *   against 19px body, and small-caps labels at 11px doing the work a chip
 *   would otherwise do.
 *
 * ## Contrast is asserted, not eyeballed
 *
 * `test/site.test.ts` computes the WCAG ratio of every text colour against its
 * ground and fails below AA. `--ink-faint` sets the imprint — which is the
 * statutory trading disclosure — and the first draft of this palette failed on
 * exactly that colour, at 3.49:1. Darkening it was not a question of taste.
 *
 * Light is the base declaration and dark is a media-query override, so a
 * browser reporting no preference gets the light palette — the right way round
 * for a page somebody has been sent to read a company number off. There is no
 * theme toggle and no `data-theme` attribute, because there is no JavaScript on
 * this site to set one; see `_headers`.
 */

/* -------------------------------------------------------------- the faces */

/*
 * Source Serif 4 for everything a reader reads, self-hosted from `src/fonts/`.
 *
 * Variable across weight 300–700 and optical size 8–60. That optical-size axis
 * is why it beat a static face: one file sets the 70px titles and the 19px
 * body, and the letterforms genuinely change shape between them rather than
 * being a single drawing scaled twice. Adobe drew it for long-form reading in
 * professional contexts, which is precisely what these pages are.
 *
 * `font-display: swap` renders the fallback immediately and swaps when the
 * file lands. On a legal page, the wrong text for 200ms beats no text.
 *
 * Two subsets per style, split on Google's own `unicode-range` boundaries, so
 * a reader whose page is entirely ASCII never fetches the extended file.
 */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/source-serif-4-italic-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/source-serif-4-italic-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/*
 * Public Sans for labels only — the masthead, the small-caps section kickers,
 * the hanging labels beside a fact, the imprint.
 *
 * Commissioned by the US Web Design System for federal public documents, and
 * drawn for neutrality and legibility at small sizes. That is exactly the job
 * here: a trading disclosure at 13px and a column of 11px labels. It has no
 * opinion, which is what you want from a face whose entire role is to not be
 * the serif.
 *
 * Roman only. Nothing in the label face is ever italic, and `base.css` turns
 * off synthesis so a browser cannot invent a slanted one.
 */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/public-sans-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/public-sans-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ------------------------------------------------------------------ light */

:root {
  /* Bone. A shade warm of neutral, so the cold ink has something to sit on. */
  --paper: #f7f6f2;

  /* Midnight, then two steps up for secondary text. */
  --ink: #111621;
  --ink-soft: #454e5e;

  /*
   * Darkened from #7b8494, which failed WCAG AA at 3.49:1 on this ground.
   * Same hue and saturation, lower lightness — 4.62:1. This colour sets the
   * imprint and every small-caps label, all of it small text, so AA is the
   * floor and not the target.
   */
  --ink-faint: #67707f;

  --rule: #d5d7d3;
  --rule-soft: #e6e7e3;

  /* Brass: the ark, and the only warm thing here. Mark, current page, hover. */
  --accent: #8a6a33;

  /*
   * The "to confirm" marker. The one colour on the site nothing else uses, so
   * an unfinished legal detail can never be mistaken for settled text.
   */
  --pending: #9a5a05;

  --focus: #8a6a33;

  --font-display: 'Source Serif 4', 'Iowan Old Style', Charter, Georgia, serif;
  --font-body: 'Source Serif 4', 'Iowan Old Style', Charter, Georgia, serif;
  --font-label: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* The reading column, and the wider band the masthead and footer span.
     At the 19px body size 34rem ran about 57 characters to the line, short of
     the 60-75 a document read straight through wants. */
  --measure: 38rem;
  --wrap: 74rem;
}

/* ------------------------------------------------------------------- dark */

@media (prefers-color-scheme: dark) {
  :root {
    /* The deep field itself. Blue-black, never neutral black. */
    --paper: #0d111a;

    --ink: #e6e7e4;
    --ink-soft: #a2aab8;
    --ink-faint: #7a8494;

    --rule: #232a38;
    --rule-soft: #181e29;

    --accent: #c4a063;

    --pending: #e0a94e;

    --focus: #c4a063;
  }
}