/* Design tokens — transcribed from design/design_handoff_agentblog/README.md ("Design
 * Tokens") and mockups/Tokens.dc.html. Every colour on the site is one of these custom
 * properties; the palette ceiling is six colours per mode (five neutrals + one accent) plus
 * one reserved terracotta for "false" verdicts and form errors. Nothing may introduce a new
 * colour literal outside this file (tests/golden_render.rs guards this file itself). */

:root {
  /* Colour — light mode, accent preset A (deep teal). */
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --text: #1A1A19;
  --text-2: #666560;
  --line: #E3E2DC;
  --accent: #0F6E6E;
  /* S087's Profile tab draws both accent presets as always-visible swatch buttons, not
   * only the one `--accent` currently in force — named separately from `--accent`/
   * `[data-accent="orange"]`'s conditional pair above so a stylesheet can show both at
   * once with no literal of its own — the palette ceiling this file's own header comment
   * states (`tests/golden_render.rs`'s `no_stylesheet_but_tokens_css_declares_a_
   * colour_literal` forbids a hex literal anywhere else). Both values are the same two
   * light-mode hexes already in this file's own palette (`--accent` above,
   * `[data-accent="orange"]`'s `--accent` below), not new colours — just named
   * unconditionally so `web/static/css/dash-profile.css` can reference them regardless
   * of the page's own live accent (D-121). Named `-1`/`-2`, not by preset name — a
   * `var()` reference carrying either colour word verbatim would itself read as a bare
   * named-colour keyword to this file's own guard below. */
  --accent-preset-1: #0F6E6E;
  --accent-preset-2: #B5461B;
  --on-accent: #FFFFFF;
  --false: #A8542E;

  /* Type faces. `--reading` is the reading-prose face S071's `data-reading-face`
   * switches (serif `--display` by default, matching `users.reading_face`'s own DB
   * default) — the article body is the one place per-user theming's serif/sans choice
   * is visible (`docs/design-brief.md`: "Article typography that people will actually
   * read"); headings stay pinned to `--display` regardless of this choice. */
  --display: 'Newsreader', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --reading: var(--display);

  /* Type scale. */
  --size-display: clamp(32px, 4.4vw, 44px);
  --leading-display: 1.15;
  --tracking-display: -0.015em;
  --size-h1: 28px;
  --size-h2: 22px;
  --size-reading: 19px;
  --leading-reading: 1.65;
  --measure-reading: 68ch;
  --size-ui: 15px;
  --size-ui-dense: 14px;
  --size-helper: 13px;
  --size-mono: 12px;
  --tracking-eyebrow: 0.08em;
  /* The article header's eyebrow is the one eyebrow the handoff tracks at `.06em`
   * (`design/design_handoff_agentblog/mockups/Article.dc.html:60`, the `Essay · 8 min read`
   * line); every other one — the verdict card's `Fact check` (`:75`), the citations and
   * tags `h2` (`:94`, `:103`), the tag concept card's `Concept · /tags/…` (`:122`) — is
   * `.08em`. One token cannot serve both, so the article's tighter value is its own
   * (S077d review round 1). */
  --tracking-eyebrow-article: 0.06em;

  /* Spacing — 4px grid. */
  --space: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --content-width: 1080px;

  /* Shape, shadow, motion. */
  --radius-s: 4px;
  --radius-m: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.06);
  --motion: 150ms ease;
}

:root[data-accent="orange"] {
  --accent: #B5461B;
}

:root[data-reading-face="sans"] {
  --reading: var(--sans);
}

:root[data-theme="dark"] {
  --bg: #131311;
  --surface: #1B1B19;
  --text: #ECEBE5;
  --text-2: #A3A29A;
  --line: #2D2D2A;
  --accent: #5BB8B2;
  --on-accent: #0E1A19;
  --false: #D68A63;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
}

:root[data-theme="dark"][data-accent="orange"] {
  --accent: #E58553;
  --on-accent: #1C110B;
}

/* The preference-driven half of the dark palette (D-110, S080a). The attribute blocks above
 * are selected by the root `data-theme` a blog owner's `users.color_scheme` forces on her
 * pages (S148, D-208; `system` sets none). These companions deliver the same palette to a
 * visitor whose OS asks for dark, and `:not([data-theme="light"])` is what lets the two
 * cooperate: it stands down for a reader who explicitly chose light, and outranks the light
 * `:root` block by one attribute selector. Each companion mirrors the attribute block it
 * shadows declaration for declaration; `tests/golden_theme.rs` resolves both cascades and
 * compares the result. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131311;
    --surface: #1B1B19;
    --text: #ECEBE5;
    --text-2: #A3A29A;
    --line: #2D2D2A;
    --accent: #5BB8B2;
    --on-accent: #0E1A19;
    --false: #D68A63;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
  }

  /* One attribute selector more than the companion above, so an owner on the orange preset
   * keeps the orange pair — the same relationship
   * `:root[data-theme="dark"][data-accent="orange"]` has with `:root[data-theme="dark"]`. */
  :root:not([data-theme="light"])[data-accent="orange"] {
    --accent: #E58553;
    --on-accent: #1C110B;
  }
}

/* Self-hosted latin subsets (OFL; licences alongside the files in fonts/). Newsreader
 * 400/500 + 400 italic, Instrument Sans 400/500, JetBrains Mono 400 — two weights max per
 * face per the brief. URLs are relative so they resolve against this file's own
 * /static/{build_id}/ prefix, which is shared by every asset under static/ (one prefix per
 * process, not one hash per file — see src/http/static_files.rs module docs). */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/newsreader-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}