/**
 * Anirova District Experience — Design Tokens
 *
 * Quelle: docs/handoff/anirova-website-district-redesign/assets/tokens.css
 * (Handoff-Paket, DESIGN.md Abschnitt 2/3/5/6/10).
 *
 * BEWUSST ADDITIV: Diese Datei ueberschreibt KEINE Bestandstokens aus styles.css
 * (--bg, --accent, --text ...). Der District-Namensraum ist --color-, --space-,
 * --radius-, --elev-, --dur- und --font-. Damit bleibt das Neo-Japan-Design bis zur
 * 100-%-Abnahme unveraendert lauffaehig und ein Rollback ist das Entfernen einer
 * einzigen <link>-Zeile (09-QUALITY-GATES.md, Abschnitt Rollback).
 *
 * ACHTUNG --ease-out: styles.css:89 definiert denselben Namen mit exakt demselben
 * Wert cubic-bezier(.16,1,.3,1). Kein Konflikt, aber nicht umdefinieren.
 */
:root {
  /* Farben — Rollen laut DESIGN.md Abschnitt 2 */
  --color-bg-base: #050d1f;
  --color-bg-recessed: #07111c;
  --color-surface: #0d1426;
  --color-surface-raised: #141f2e;
  --color-surface-modal: #1a2633;
  --color-text-hi: #eaf2ff;
  --color-text-mid: #9bb4cc;
  --color-text-lo: #68839d;
  --color-primary: #00b3ff;
  --color-primary-bright: #00d9ff;
  --color-district: #ff4d3f;
  --color-district-muted: #a93632;
  --color-success: #00cc55;
  --color-warning: #ffa000;
  --color-danger: #ff334d;
  --color-premium: #ffd700;
  --color-border: #24445e;
  --color-focus: #00e6ff;

  /* Der Prototyp hatte diese vier Werte hartcodiert. Als Token, weil sie
     mehrfach vorkommen und sonst beim Theme-Wechsel auseinanderlaufen. */
  --color-on-primary: #02101b;
  --color-scrim: rgb(5 13 31 / .92);
  --color-atlas-void: #020811;
  --color-panel-bg: rgb(7 17 28 / .96);

  /* Spacing — 4/8er-Skala, DESIGN.md Abschnitt 5 */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Tiefe — weich, DESIGN.md Abschnitt 6 */
  --elev-1: 0 8px 24px rgb(0 0 0 / .24);
  --elev-2: 0 18px 48px rgb(0 0 0 / .32);
  --elev-3: 0 30px 80px rgb(0 0 0 / .44);
  --elev-glow: 0 0 28px rgb(0 179 255 / .22);

  /* Motion — DESIGN.md Abschnitt 10 */
  --dur-instant: 0ms;
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-travel: 520ms;
  --dur-reveal: 340ms;
  --dur-cinematic: 780ms;
  --ease-district-out: cubic-bezier(.16, 1, .3, 1);
  --ease-district-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Layout-Maxima, DESIGN.md Abschnitt 5 */
  --measure-read: 720px;
  --measure-content: 1200px;
  --measure-city: 1600px;
  --touch-target: 48px;

  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-code: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;
}

/**
 * Sichtbarer Fokusring fuer alle District-Komponenten.
 *
 * Ohne diese Regel zeigt der Browser seinen Default (1 px, orange) — DESIGN.md
 * Abschnitt 2 verlangt 2 px in --color-focus. Bewusst auf den District-Namensraum
 * begrenzt: ein globales *:focus-visible wuerde in die bestehende Neo-Japan-
 * Oberflaeche eingreifen und waere damit nicht mehr sauber zurueckrollbar.
 */
[data-component="district-shell"] :focus-visible,
[data-component="global-dock"] :focus-visible,
.district-node:focus-visible,
.district-card:focus-visible,
.district-skip:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/**
 * Reduce Motion: Zoom/Pan entfallen, Uebergaenge werden zu kurzen Crossfades.
 * Die Dauern werden hier zentral gekappt, damit JS denselben Wert lesen kann
 * (04-INTERACTION-MOTION.md: "wird in CSS und JS geprueft").
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-travel: 120ms;
    --dur-reveal: 120ms;
    --dur-cinematic: 120ms;
  }
}