/* 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. */

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

:root {
  color-scheme: dark;

  /* --- Grundfarben ------------------------------------------------------ */
  --color-bg: #0b0e1a;
  --color-surface: #121729;
  --color-surface-2: #1a2138;
  --color-border: #232c4a;
  --color-border-strong: #33406b;
  --color-text: #e9eeff;
  --color-text-muted: #93a0c7;
  --color-heading: #ffffff;

  /* --- Akzente: Cyan (Guardian-Grid) + Violett (chromatische Kante) ----- */
  --color-accent: #45f1e2;
  --color-accent-2: #c45bff;
  --color-on-accent: #061220;

  /* --- 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(3 5 12 / 0.5);
  --shadow-2: 0 12px 40px rgb(3 5 12 / 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(3 5 12 / 0.7);
}