/*
 * Design tokens for the Audiohh backend web UI.
 *
 * The web UI is LIGHT (warm paper, near-black 2px edges, hard offset
 * shadows). The Mac app (AudiohhRecorder) stays dark, on purpose — plan
 * "Seitennavigation statt Topbar", KD1. The two are deliberately allowed
 * to diverge; there is NO drift guard between them.
 *
 * (The comment that used to stand here named a pytest file as the drift
 * guard keeping these values in sync with SwiftUI `Theme.swift`. That
 * test has never existed — not in the repo and not in its history.
 * Anyone reading the old note assumed a protection that was not there;
 * hence this correction, Risk R-2 of the same plan. The guard against
 * the claim coming back lives in tests/test_light_tokens.py.)
 *
 * Rules:
 *   - The `--surface/--ink/--edge/--accent/--signal` set below is the
 *     source of truth. Reach for these in new code.
 *   - `--chassis-*`, `--led-*` and `--text-*` are the OLDER names, kept
 *     because page templates this plan does not touch still use them
 *     (KTD2). They are now aliases onto the light set, so re-pointing one
 *     value here re-points the whole UI. The names still say "chassis"
 *     (a dark case) and "led" (a glowing dot) — that is historical, not
 *     descriptive.
 *   - Anything else is a shape/typography token (radii, fonts).
 */

:root {
  /* ── Light surface stack — warm paper, not white ── */
  --surface:               rgb(247, 243, 233);
  --surface-raised:        rgb(255, 252, 246);
  --surface-sunken:        rgb(238, 232, 219);

  /* ── Ink — near black, never pure #000 ── */
  --ink:                   rgb(26, 24, 20);
  --ink-muted:             rgb(92, 86, 76);
  --ink-faint:             rgb(138, 130, 118);

  /* ── Edges — hard, dark, 2px. The poster look lives here. ── */
  --edge:                  rgb(26, 24, 20);
  --edge-soft:             rgba(26, 24, 20, 0.14);
  --edge-width:            2px;
  --shadow-offset:         4px 4px 0 var(--edge);
  --shadow-offset-sm:      2px 2px 0 var(--edge);

  /* ── Accents. Darkened against the dark-UI originals: those were mixed
   *    for a black ground and read washed-out on paper. Every one of
   *    these clears 4.5:1 on --surface (see tests/test_light_tokens.py). ── */
  --accent:                rgb(193, 68, 14);   /* orange — primary */
  --accent-2:              rgb(88, 52, 160);   /* violet — secondary */
  --signal:                rgb(17, 110, 60);   /* green — success/live */
  --warn:                  rgb(13, 79, 92);    /* petrol — attention */
  --danger:                rgb(176, 32, 26);   /* red — failure */

  /* `--warn` was amber `rgb(146,88,4)` until 04.08.2026. Tobi, on seeing the
   * naming banner and the callouts: "auf Naturtönen kaum zu erkennen." He was
   * right twice over, and both reasons are measurable:
   *
   *   1. Same hue as the paper. `--surface` sits at Lab hue 94°; the amber sat
   *      at 70° with chroma 54. A saturated version of the ground's own hue
   *      differs from it in lightness alone, which is the weakest signal a
   *      warm background can carry. Contrast was 5.24:1 — the lowest of the
   *      five accents bar `--accent` itself.
   *   2. It collided with failure. Simulated for deuteranopia (Viénot), the
   *      amber landed ΔE 3.1 from `--danger` — an "attention" badge and a
   *      "failed" badge were the same colour for a red-green-blind reader.
   *      Under protanopia it was ΔE 4.9 from `--accent`.
   *
   * Petrol fixes both: 8.28:1 on paper, hue 222° (near the opposite side from
   * the paper's 94°), and ≥33 ΔE from green, red and orange under both
   * simulations. It is also the palette's only cold colour, so "something is
   * waiting" no longer looks like a warmer shade of "something broke".
   * Guarded by tests/test_light_tokens.py::TestAttentionColourIsDistinct. */

  /* ── Legacy aliases (KTD2) — old names, light values ── */
  --chassis-bg:            var(--surface);
  --chassis-panel:         var(--surface-raised);
  --chassis-panel-raised:  var(--surface-raised);
  --chassis-border:        var(--edge-soft);

  --led-red:               var(--danger);
  --led-amber:             var(--warn);
  --led-green:             var(--signal);
  --led-white-dim:         var(--ink-faint);
  --led-white-bright:      var(--ink);

  --text:                  var(--ink);
  --text-muted:            var(--ink-muted);
  --text-dim:              var(--ink-faint);

  /* Shape */
  --radius:                8px;
  --radius-sm:             4px;

  /* Type */
  --font-sans:             -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  --font-mono:             "SF Mono", "Fira Code", ui-monospace, monospace;
  --font-seg:              "DSEG7 Classic", var(--font-mono);
  --font-pixel:            "Silkscreen", var(--font-mono);
}

/* DSEG7 Classic — self-hosted for the LED timer. font-display:block so
 * the timer never flashes in SF Mono before flipping to 7-segment. Face
 * is small (~5KB woff2) so the block period is imperceptible. */
@font-face {
  font-family: 'DSEG7 Classic';
  src: url('/static/dseg7-classic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* Silkscreen — the wordmark's pixel face, self-hosted for the same reason
 * DSEG7 is (KTD1): no CDN request, so the UI is complete offline and no
 * font host learns who visits. Latin subset only; it carries ÄÖÜ äöü ß,
 * verified in tests/test_light_tokens.py. font-display:swap — the wordmark
 * is decoration, so a fallback flash beats a blank corner. */
@font-face {
  font-family: 'Silkscreen';
  src: url('/static/silkscreen-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Silkscreen';
  src: url('/static/silkscreen-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}