/* @level primitive */
/*
 * tokens.css — the design system as CSS custom properties.
 *
 * Two layers, both as variables on :root.
 *
 *   Primitives (--m-color-*, --m-size-*) — the raw palette. Fallback
 *   HSL values here render the page meaningfully even before the
 *   wasm module boots. At runtime the kernel emits one t.dom.set_var
 *   Effect per primitive on theme change; the JS handler overwrites
 *   these with rgba()/px values from the active theme.
 *
 *   Semantic (--m-surface-*, --m-content-*, --m-border-*, etc.) —
 *   intent-bearing names. The fallback values here match the primitive
 *   they'd resolve to in the default (dark) theme. At runtime the
 *   kernel ALSO emits set_var Effects for each semantic name, with
 *   the {ref} already resolved in tokens.json — so CSS never has to
 *   do var() chaining and there's no two-step indirection.
 *
 * Source of truth: crates/kernel-wasm/tokens.json. The fallbacks here
 * mirror the dark theme's values so an offline page still looks right.
 * Editing fallbacks is fine for new pages that want a different
 * default; the theme values overwrite at runtime regardless.
 */

:root {
  color-scheme: dark;

  /* ── Primitives ─────────────────────────────────────────────── */

  --m-color-neutral-50:    hsl(220 17%  7%);
  --m-color-neutral-200:   hsl(220 14% 12%);
  --m-color-neutral-500:   hsl(220  8% 47%);
  --m-color-neutral-700:   hsl(220  6% 72%);
  --m-color-neutral-900:   hsl(220  9% 91%);

  --m-color-accent-300:    hsl(140 45% 43%);
  --m-color-accent-500:    hsl(140 60% 70%);

  --m-color-status-success: hsl(140 60% 70%);
  --m-color-status-danger:  hsl(  5 95% 72%);

  --m-size-space-1:  4px;
  --m-size-space-2:  8px;
  --m-size-space-3:  12px;
  --m-size-space-4:  16px;
  --m-size-space-6:  24px;
  --m-size-space-7:  32px;

  --m-size-font-sm:  13px;
  --m-size-font-md:  16px;
  --m-size-font-lg:  18px;

  /* Typeface — a humanist SANS for prose/UI (reads as design, not code) + a refined MONO kept for the
   * technical/numeric bits (dial values, ports, the clock readout). The pairing bridges artist +
   * engineer. System stacks only (no web-font fetch — Rule 3); the lead names are bundle-ready hooks —
   * drop a .woff2 + an @font-face and they take over with no other change. */
  --m-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --m-font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --m-size-radius-sm: 2px;
  --m-size-radius-md: 4px;

  /* ── Semantic ───────────────────────────────────────────────── */
  /*
   * These are flat values, not var() chains. The kernel resolves
   * tokens.json's {ref} strings to primitive values per theme before
   * emitting. Fallbacks here use the same primitive values, kept
   * consistent with the dark-theme defaults.
   */

  --m-surface-base:        hsl(220 17%  7%);
  --m-surface-raised:      hsl(220 14% 12%);

  --m-content-primary:     hsl(220  9% 91%);
  --m-content-secondary:   hsl(220  6% 72%);
  --m-content-tertiary:    hsl(220  8% 47%);

  --m-border-default:      hsl(220 14% 12%);
  --m-border-emphasis:     hsl(220  8% 47%);

  --m-interactive-primary: hsl(140 60% 70%);
  --m-interactive-muted:   hsl(140 45% 43%);

  --m-wire-audio:          hsl(140 60% 70%);
  --m-wire-control:        hsl( 35 90% 65%);
  --m-wire-midi:           hsl(210 90% 70%);
  --m-wire-trigger:        hsl(270 70% 75%);
  --m-wire-sidechain:      hsl(140 60% 70%);
  --m-wire-sync:           hsl(170 60% 55%);
  --m-wire-gate:           hsl(270 75% 73%);
  --m-wire-data:           hsl(215 25% 58%);
  --m-wire-other:          hsl(220  8% 47%);
}