/*
 * Theme tokens.
 *
 * Each theme sets the same list of variables; site.css only ever uses these
 * variables, never raw colours or fonts. The theme is chosen by the
 * `data-theme` attribute on <html>, which the server sets from the visitor's
 * cookie (see src/lib/themes.ts).
 *
 * With no data-theme (the visitor hasn't chosen), Specification is used, or
 * Signal if the visitor's system is in dark mode.
 *
 * Token reference:
 *   --color-background       page background
 *   --color-surface          cards and panels
 *   --color-text             body text
 *   --color-text-muted       secondary text (must still pass 4.5:1 contrast)
 *   --color-border           subtle dividers
 *   --color-border-strong    emphasised rules, input borders
 *   --color-accent           links, highlights, primary buttons
 *   --color-on-accent        text on top of the accent colour
 *   --color-code-background  code and log panels
 *   --color-code-text        text in code panels
 *   --color-code-muted       secondary text in code panels
 *   --color-code-accent      highlights in code panels (readable on code background)
 *   --font-body / --font-mono
 *   --heading-weight / --heading-letter-spacing
 *   --radius                 corner rounding
 *   --border-style           solid or dashed
 *   --page-pattern           background-image for the page (or none)
 */

/* ---------- Specification: light, technical document (default) ---------- */

:root,
:root[data-theme='specification'] {
  color-scheme: light;

  --color-background: #f6f6f3;
  --color-surface: #ffffff;
  --color-text: #121417;
  --color-text-muted: #4a5058;
  --color-border: #d4d4cc;
  --color-border-strong: #121417;
  --color-accent: #2242e8;
  --color-on-accent: #ffffff;
  --color-code-background: #121417;
  --color-code-text: #e9eae6;
  --color-code-muted: #9ca2a9;
  --color-code-accent: #9fb0ff;

  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --heading-weight: 500;
  --heading-letter-spacing: -0.04em;

  --radius: 0;
  --border-style: solid;
  --page-pattern: none;
}

/* ---------- Signal: dark, instrument panel ---------- */

/*
 * Signal's tokens appear twice: once for visitors in system dark mode who
 * haven't chosen a theme, and once for visitors who picked Signal.
 * CSS can't share one block between a media query and a selector, so
 * KEEP THE TWO BLOCKS BELOW IDENTICAL.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --color-background: #0b0d10;
    --color-surface: #11151a;
    --color-text: #e6eaee;
    --color-text-muted: #a3adb7;
    --color-border: #1e242b;
    --color-border-strong: #2e3740;
    --color-accent: #ffb547;
    --color-on-accent: #0b0d10;
    --color-code-background: #07090b;
    --color-code-text: #e6eaee;
    --color-code-muted: #8b96a1;
    --color-code-accent: #ffb547;

    --font-body: 'Geist', system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, monospace;
    --heading-weight: 600;
    --heading-letter-spacing: -0.035em;

    --radius: 6px;
    --border-style: solid;
    --page-pattern: none;
  }
}

:root[data-theme='signal'] {
  color-scheme: dark;

  --color-background: #0b0d10;
  --color-surface: #11151a;
  --color-text: #e6eaee;
  --color-text-muted: #a3adb7;
  --color-border: #1e242b;
  --color-border-strong: #2e3740;
  --color-accent: #ffb547;
  --color-on-accent: #0b0d10;
  --color-code-background: #07090b;
  --color-code-text: #e6eaee;
  --color-code-muted: #8b96a1;
  --color-code-accent: #ffb547;

  --font-body: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --heading-weight: 600;
  --heading-letter-spacing: -0.035em;

  --radius: 6px;
  --border-style: solid;
  --page-pattern: none;
}

/* ---------- Blueprint: navy, engineering drawing ---------- */

:root[data-theme='blueprint'] {
  color-scheme: dark;

  --color-background: #0b2140;
  --color-surface: #0e2749;
  --color-text: #eaf2ff;
  --color-text-muted: #a9bedc;
  --color-border: #2b4c7e;
  --color-border-strong: #4f72a6;
  --color-accent: #ff7a2f;
  --color-on-accent: #0b2140;
  --color-code-background: #071830;
  --color-code-text: #eaf2ff;
  --color-code-muted: #a9bedc;
  --color-code-accent: #ff7a2f;

  --font-body: 'Archivo', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  --heading-weight: 700;
  --heading-letter-spacing: -0.03em;

  --radius: 0;
  --border-style: dashed;
  --page-pattern:
    linear-gradient(#11294d 1px, transparent 1px),
    linear-gradient(90deg, #11294d 1px, transparent 1px);
}