/* semantic.css — iOUI tokens, theme-neutral part · Owner: Daniel Klier · 2026-10-31
   Load order: semantic.css, then ONE theme (themes/default.css | themes/fractal.css).
   Bauteile (catalog/elements/**) use ONLY these names — never a hex, never a raw px
   beyond the 0px/1px hairline (enforced by dev/check-catalog.py).

   Two layers:
   1. Scale (here): space · type · motion · font. Geometry of the fractal (ratio 2 for
      space and motion, √2 for type) — it is the same in every theme.
   2. Colour (themes): shadcn names as full colour values (`--background: hsl(224 41% 7%)`,
      like shadcn with Tailwind 4; triplets until 2026-11-03, T051),
      `:root` = light, `.dark` = dark. Use as `var(--card)`, alpha as
      `color-mix(in srgb, var(--background) 60%, transparent)`. Plus --fx-quadrant-* / --fx-grundy-* for the
      quadrant hues and the Grundy lightness ramp (iSquare; ADR-060 --a1..a4 ≙ --chart-1..4).
   3. Status fallback (here, T053b 2026-11-03): --success / --warning / --info are not shadcn
      standard names, so a shadcn project lacks them (T053: badges lost colour). Values = theme
      default, under :where() = specificity 0 → every theme and every project definition wins,
      whatever the load order. --destructive needs none (shadcn has it).
   W1 (DTCG source) will later emit the values; the names here stay. */

:root {
  /* space · 2^k px (k = 0..7) */
  --fx-step-0: 1px;  --fx-step-1: 2px;  --fx-step-2: 4px;   --fx-step-3: 8px;
  --fx-step-4: 16px; --fx-step-5: 32px; --fx-step-6: 64px;  --fx-step-7: 128px;

  /* type · 10·√2^k px (k = 0..5) */
  --fx-type-0: 10px; --fx-type-1: 14px; --fx-type-2: 20px;
  --fx-type-3: 28px; --fx-type-4: 40px; --fx-type-5: 57px;
  --fx-type-micro: 9px;        /* the 8×8 grid's meta line, below type-0 */

  /* motion · 180·2^k ms */
  --fx-motion-1: 180ms; --fx-motion-2: 360ms; --fx-motion-3: 720ms;
  --fx-ease: cubic-bezier(.2, .8, .2, 1);

  /* fractal constants */
  --fx-ratio: 2;
  --fx-diag: 1.41421356;
  --fx-levels: 5;

  /* shape — themes may override */
  --radius: 6px;
  --radius-leaf: 2px;

  /* elevation */
  --shadow-popover: 0 16px 48px color-mix(in srgb, var(--background) 60%, transparent);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
}

/* status fallback — loses against any theme or project value (specificity 0) */
:where(:root) {
  --success: hsl(142 71% 35%);
  --warning: hsl(38 92% 45%);
  --info: hsl(217 91% 55%);
}
:where(.dark) {
  --success: hsl(142 60% 50%);
  --warning: hsl(38 92% 60%);
  --info: hsl(217 91% 65%);
}