/* THEME — Squid Ink / Technical.
   Colour and type tokens only. Layout lives in layout.css, components in
   app.css. Light is the default; dark applies two ways so both a stored
   choice and the OS preference work:

     1. `:root[data-theme="dark"]`            — the reader's stored choice.
     2. `prefers-color-scheme: dark`, guarded — the OS default, until the
        reader picks a side. `site.js` sets `data-theme` only after a click;
        with no stored value it leaves the attribute off, so this media
        query is what paints the first visit. */

:root {
  color-scheme: light;
  --bg: #FFFFFF; --surface: #F4F6F8; --ink: #14181D; --ink-hi: #0B0E12;
  --dim: #58616B; --ink-dim: var(--dim); --ink-faint: #7B8390;
  --rule: #DDE2E7; --rule-hi: #C7CED6;
  --accent: #D27600; --link: #0B7A83; --bar: #1B2733; --bar-ink: #F2F5F8;
  --ok: #1E8E5A;

  --fig-bg: transparent; --fig-ink: #5B636B; --fig-grid: #E8ECEF;
  --fig-band: #0B7A83; --fig-accent: #D27600;
  --band-outer: .24; --band-inner: .46;

  --code-key: #7C5CBF; --code-str: #B5650A; --code-num: #1E8E5A;
  --code-fn: #0B6FB4; --code-com: #7B8390; --code-op: #C0392B;

  /* thumbnails are graded down in dark mode only, see app.css .proj__vis */
  --thumb-filter: none;

  /* pairing t4, "Technical": Schibsted Grotesk over Literata, Geist Mono for
     data. --font-display/--w-display are the names app.css already reads. */
  --font-head: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-head);
  --font-body: "Literata", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --head-weight: 700;
  --w-display: var(--head-weight);
  --body-size: 1.0625rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121922; --surface: #18212C; --ink: #E7ECF1; --ink-hi: #FFFFFF;
  --dim: #93A0AD; --ink-dim: var(--dim); --ink-faint: #7C8894;
  --rule: #243241; --rule-hi: #32435A;
  --accent: #FFB23F; --link: #45C9D1; --bar: #0E141B; --bar-ink: #E7ECF1;
  --ok: #8FD98A;

  --fig-bg: transparent; --fig-ink: #93A0AD; --fig-grid: #1E2A37;
  --fig-band: #45C9D1; --fig-accent: #FFB23F;
  --band-outer: .28; --band-inner: .52;

  --code-key: #B69BF0; --code-str: #F2B47E; --code-num: #93DDA8;
  --code-fn: #7FC7F5; --code-com: #79839A; --code-op: #F0929B;

  --thumb-filter: saturate(.85) brightness(.82) contrast(1.04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121922; --surface: #18212C; --ink: #E7ECF1; --ink-hi: #FFFFFF;
    --dim: #93A0AD; --ink-dim: var(--dim); --ink-faint: #7C8894;
    --rule: #243241; --rule-hi: #32435A;
    --accent: #FFB23F; --link: #45C9D1; --bar: #0E141B; --bar-ink: #E7ECF1;
    --ok: #8FD98A;

    --fig-bg: transparent; --fig-ink: #93A0AD; --fig-grid: #1E2A37;
    --fig-band: #45C9D1; --fig-accent: #FFB23F;
  --band-outer: .28; --band-inner: .52;

    --code-key: #B69BF0; --code-str: #F2B47E; --code-num: #93DDA8;
    --code-fn: #7FC7F5; --code-com: #79839A; --code-op: #F0929B;

    --thumb-filter: saturate(.85) brightness(.82) contrast(1.04);
  }
}