/* Neutrale, template-UNABHÄNGIGE Design-Tokens — gemeinsame Basis für die
 * Kundenflächen Login, Registrierung, Booking und Kundenportal.
 *
 * Wird VOR der jeweiligen Komponenten-CSS geladen (book.html, portal.html),
 * damit alle vier Flächen exakt dieselbe Palette teilen und an EINER Stelle
 * änderbar sind — egal welches Website-Template der Salon gewählt hat.
 *
 * Idee: neutrale Basis (Schwarz/Weiß/Grau) + kleine, vivide Farb-Pops
 * (Primär = Blau; Pink/Grün/Amber für Status), inspiriert von der FIFA WM 2026.
 */
:root {
  /* ── Neutrale Basis ─────────────────────────────────────────────── */
  --bg: #f6f7f8;
  --bg-2: #eef0f2;
  --surface: #ffffff;
  --panel: #ffffff;
  --ink: #16181d;
  --ink-2: #3f434b;
  --muted: #6b7280;
  --line: #e6e8eb;
  --line-2: #d6d9de;
  --line-strong: #d6d9de;
  --soft: #f1f2f4;

  /* ── Akzente — sparsam einsetzen (Multi-Pop) ────────────────────── */
  --accent: #2563eb;       /* primär: Button / aktiv / Fokus */
  --accent-dark: #1d4ed8;
  --accent-soft: #eaf0ff;
  --pink: #e5006d;         /* Badge „neu" */
  --pink-soft: #ffe9f2;
  --success: #059669;      /* Status frei / ok */
  --success-soft: #e6f6ef;
  --warn: #f59e0b;         /* Status „wenige" */
  --warn-soft: #fef3df;
  --danger: #dc2626;       /* Fehler */
  --danger-soft: #fdeaea;
  --utilization-low: #059669;
  --utilization-medium: #f59e0b;
  --utilization-high: #ea580c;
  --utilization-full: #b91c1c;
  --utilization-unavailable: #9ca3af;
  --utilization-track: #e5e7eb;
  --utilization-radius: 999px;

  /* Signatur-Verlauf (FIFA-WM-2026-Optik): dünner Multicolor-Akzent,
   * sparsam als 3px-Streifen auf Karten/Seitenkopf eingesetzt. */
  --accent-gradient: linear-gradient(90deg, var(--accent), var(--pink) 38%, var(--warn) 68%, var(--success));

  /* Aliase für ältere Booking-Token-Namen (Sicherheitsnetz) */
  --rose: var(--accent);
  --rose-2: var(--accent-dark);

  /* ── Typografie — feine Serif für Headlines beibehalten ─────────── */
  --display: "Cormorant Garamond", Georgia, serif;
  --ui: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;

  /* ── Radius & Schatten ──────────────────────────────────────────── */
  --radius: 14px;
  --radius-s: 10px;
  --radius-m: 12px;
  --radius-l: 18px;
  --shadow-s: 0 1px 2px rgba(22, 24, 29, 0.05);
  --shadow: 0 1px 2px rgba(22, 24, 29, 0.04), 0 18px 50px -28px rgba(22, 24, 29, 0.25);
}