/* Design-Tokens - DIE zentrale Theming-Datei.
   Regel: Außerhalb dieser Datei steht kein Farbwert. Alles läuft über var(--...).
   Ein späteres zweites Theme wäre ein reiner Override dieser Variablen.
   Einzige Ausnahme: public/404.html und public/500.html (statisch, ohne Asset-Pipeline)
   tragen eine Kopie der benötigten Tokens - Farbänderungen dort nachziehen. */

@layer reset, base, layout, components, pages, booking, admin;

:root {
  color-scheme: dark;

  /* --- Grundfarben ------------------------------------------------------
     Tiefes Blauschwarz auf der Farbton-Achse des Marken-Blaus (OKLCH 232°),
     bewusst ohne Violett-Anteil. Helligkeit steigt von bg bis border-strong. */
  --color-bg: #081015;
  --color-surface: #0d1a20;
  --color-surface-2: #14252e;
  --color-border: #1b313c;
  --color-border-strong: #284757;
  --color-text: #e7f0f5;
  --color-text-muted: #89a6b6;
  --color-heading: #ffffff;

  /* --- Marke: die beiden Farben aus dem Logo (public/logo.PNG) ---------
     Hier ändern, wenn sich die Markenfarben ändern - alle Akzente, Glows,
     Grid-Linien und Komponenten-Variablen leiten sich daraus ab. */
  --brand-orange: #fc7800;
  --brand-blue: #00bcfc;

  /* --- Akzente: Orange (primär) + Blau (sekundär) ----------------------- */
  --color-accent: var(--brand-orange);
  --color-accent-2: var(--brand-blue);
  --color-on-accent: #03141c;

  /* --- Status ----------------------------------------------------------- */
  --color-success: #3edc97;
  --color-warning: #ffc24d;
  --color-danger: #ff5d73;

  /* --- Abgeleitete Flächen ---------------------------------------------- */
  --color-accent-soft: color-mix(in oklab, var(--color-accent) 14%, transparent);
  --color-accent-2-soft: color-mix(in oklab, var(--color-accent-2) 14%, transparent);
  --color-success-soft: color-mix(in oklab, var(--color-success) 14%, transparent);
  --color-warning-soft: color-mix(in oklab, var(--color-warning) 16%, transparent);
  --color-danger-soft: color-mix(in oklab, var(--color-danger) 14%, transparent);
  --grid-line: color-mix(in oklab, var(--color-accent) 32%, transparent);
  --grid-line-2: color-mix(in oklab, var(--color-accent-2) 22%, transparent);

  /* --- Typografie ------------------------------------------------------- */
  --font-display: "Chakra Petch", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-s: 0.875rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-l: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  --text-display: clamp(2.4rem, 1.6rem + 4vw, 4.4rem);

  /* --- Raum & Form ------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 16px;
  --container-max: 72rem;
  --transition: 160ms ease;

  /* --- Effekte ---------------------------------------------------------- */
  --shadow-1: 0 1px 3px rgb(2 6 9 / 0.5);
  --shadow-2: 0 12px 40px rgb(2 6 9 / 0.55);
  --glow-accent: 0 0 24px color-mix(in oklab, var(--color-accent) 40%, transparent);
  --glow-accent-2: 0 0 32px color-mix(in oklab, var(--color-accent-2) 30%, transparent);

  /* --- Komponenten-Variablen (abgeleitet von den globalen Tokens) ------- */
  --btn-bg: var(--color-surface-2);
  --btn-color: var(--color-text);
  --btn-border: var(--color-border-strong);
  --btn-primary-bg: var(--color-accent);
  --btn-primary-color: var(--color-on-accent);

  --card-bg: var(--color-surface);
  --card-border: var(--color-border);

  --input-bg: color-mix(in oklab, var(--color-bg) 55%, var(--color-surface));
  --input-border: var(--color-border-strong);
  --input-focus: var(--color-accent);

  --nav-bg: color-mix(in oklab, var(--color-bg) 84%, transparent);
  --footer-bg: color-mix(in oklab, var(--color-surface) 45%, var(--color-bg));

  --tile-bg: var(--color-surface);
  --tile-border: var(--color-border-strong);
  --tile-checked-bg: var(--color-accent);
  --tile-checked-color: var(--color-on-accent);

  --slot-free-border: var(--color-border-strong);
  --slot-free-color: var(--color-text);
  --slot-full-color: color-mix(in oklab, var(--color-text-muted) 55%, transparent);
  --slot-selected-bg: var(--color-accent);
  --slot-selected-color: var(--color-on-accent);

  --flash-bg: var(--color-surface-2);
  --flash-border: var(--color-border-strong);

  --dialog-bg: var(--color-surface);
  --dialog-backdrop: rgb(2 6 9 / 0.7);

  --hero-shade: color-mix(in oklab, var(--color-bg) 45%, transparent);
  --hero-shade-strong: color-mix(in oklab, var(--color-bg) 92%, transparent);

  --slider-caption-bg: color-mix(in oklab, var(--color-bg) 85%, transparent);
  --slider-control-bg: color-mix(in oklab, var(--color-bg) 72%, transparent);
  --slider-control-color: var(--color-heading);
  --slider-dot: color-mix(in oklab, var(--color-text) 35%, transparent);
  --slider-dot-active: var(--color-accent);

  /* --- Startseite B (/startseite-b, home_b.css) --------------------------
     Eine Farbe, eine Bedeutung: Orange = handeln und Spieler, Blau = Links und Raster.
     Materialien sind dunkle, schwebende Ebenen über dem Inhalt. */
  --b-muted: var(--color-text-muted);
  --b-link: var(--brand-blue);
  --b-accent-hover: color-mix(in oklab, var(--color-accent) 88%, var(--color-heading));
  --b-tile-accent: color-mix(in oklab, var(--brand-blue) 13%, var(--color-surface));
  --b-hairline: color-mix(in oklab, var(--color-heading) 13%, transparent);
  --b-input-border: color-mix(in oklab, var(--color-text-muted) 58%, transparent);
  --b-focus-soft: color-mix(in oklab, var(--brand-blue) 28%, transparent);

  --b-material-bar: color-mix(in oklab, var(--color-bg) 66%, transparent);
  --b-material-thick: color-mix(in oklab, var(--color-surface-2) 80%, transparent);
  --b-material-edge: color-mix(in oklab, var(--color-heading) 16%, transparent);
  --b-scrim: color-mix(in oklab, var(--color-bg) 64%, transparent);
  --b-shadow-thick: 0 24px 64px rgb(2 6 9 / 0.62);
  --b-shadow-chip: 0 10px 28px rgb(2 6 9 / 0.5);
  --b-mask-solid: #000000;

  --b-band-shade: color-mix(in oklab, var(--color-bg) 58%, transparent);
  --b-band-shade-strong: color-mix(in oklab, var(--color-bg) 96%, transparent);

  --b-box-edge: color-mix(in oklab, var(--color-heading) 46%, transparent);
  --b-box-wall: color-mix(in oklab, var(--brand-blue) 10%, transparent);
  --b-box-floor: color-mix(in oklab, var(--brand-blue) 9%, var(--color-bg));
  --b-box-grid: color-mix(in oklab, var(--brand-blue) 32%, transparent);
  --b-box-light: color-mix(in oklab, var(--brand-blue) 17%, transparent);
  --b-player-body: var(--color-text);
  --b-player-visor: var(--brand-orange);
  --b-player-glow: color-mix(in oklab, var(--brand-orange) 46%, transparent);
}

/* Startseite B: Systemeinstellungen für weniger Transparenz und mehr Kontrast */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --b-material-bar: var(--color-bg);
    --b-material-thick: var(--color-surface-2);
  }
}

@media (prefers-contrast: more) {
  :root {
    --b-muted: var(--color-text);
    --b-hairline: var(--color-text-muted);
    --b-input-border: var(--color-text);
    --b-material-bar: var(--color-bg);
    --b-material-thick: var(--color-surface-2);
    --b-material-edge: var(--color-text);
  }
}