/* WOS Hotel Manager – Design-Tokens (siehe BRAND.md). Komponenten nutzen nur die Rollen-Variablen. */
:root {
  /* Primitive: Neutrals, Farbton 205 */
  --n-0: oklch(0.995 0.002 205);
  --n-25: oklch(0.982 0.004 205);
  --n-50: oklch(0.965 0.006 205);
  --n-100: oklch(0.93 0.008 205);
  --n-200: oklch(0.885 0.011 205);
  --n-300: oklch(0.80 0.013 205);
  --n-500: oklch(0.525 0.016 205);
  --n-600: oklch(0.47 0.017 205);
  --n-800: oklch(0.30 0.015 205);
  --n-900: oklch(0.20 0.012 205);

  /* Primitive: Petrol */
  --p-50: oklch(0.96 0.025 205);
  --p-100: oklch(0.92 0.045 205);
  --p-500: oklch(0.47 0.085 205);
  --p-600: oklch(0.41 0.08 205);
  --p-700: oklch(0.36 0.07 205);

  /* Rollen */
  --bg: var(--n-25);
  --surface: var(--n-0);
  --surface-sunken: var(--n-50);
  --surface-hover: var(--n-50);
  --border: var(--n-200);
  --border-subtle: var(--n-100);
  --border-strong: var(--n-300);
  --text: var(--n-900);
  --text-secondary: var(--n-600);
  --text-muted: var(--n-500);
  --text-inverted: var(--n-0);
  --accent: var(--p-500);
  --accent-hover: var(--p-600);
  --accent-active: var(--p-700);
  --accent-fg: oklch(0.99 0.005 205);
  --accent-subtle: var(--p-50);
  --accent-subtle-strong: var(--p-100);
  --focus-ring: oklch(0.55 0.11 205 / 0.55);

  --success: oklch(0.52 0.12 160);
  --success-subtle: oklch(0.95 0.035 160);
  --warning: oklch(0.52 0.12 65);
  --warning-subtle: oklch(0.955 0.045 80);
  --danger: oklch(0.53 0.18 25);
  --danger-subtle: oklch(0.955 0.03 25);

  /* Kanäle (validiert: farbenblind-sicher, Kontrast ≥ 3:1) */
  --ch-direct: #00829c;
  --ch-booking: #3d6fe0;
  --ch-expedia: #b07a00;
  --ch-airbnb: #d24a3a;
  --ch-tint: 13%;
  --bar-text: var(--n-900);
  /* Kanal-Abzeichen im Belegungsplan: dunklere Stufe derselben Farbtöne, weiße Schrift ≥ 4,5:1 */
  --badge-direct: #006b80;
  --badge-other: var(--n-600);
  --badge-fg: #fff;
  /* Markenfarben der Portal-Logos (in beiden Farbmodi gleich, wie die Logos selbst) */
  --logo-booking: #003580;
  --logo-airbnb: #ff5a5f;
  --logo-expedia-bg: #fddb32;
  --logo-expedia: #191e3b;
  --logo-google: #4285f4;
  --logo-plate: #fff;

  /* Belegungsplan: feste Farbe je Aufenthaltsstatus (wie in eviivo), der Kanal steht als Abzeichen im Balken */
  --bar-upcoming: oklch(0.89 0.085 85);
  --bar-upcoming-edge: oklch(0.78 0.11 80);
  --bar-upcoming-text: var(--n-900);
  --bar-inhouse: oklch(0.48 0.085 205);
  --bar-inhouse-edge: oklch(0.40 0.08 205);
  --bar-inhouse-text: oklch(0.99 0.004 205);
  --bar-past: var(--n-100);
  --bar-past-edge: var(--n-200);
  --bar-past-text: var(--n-600);
  --bar-unpaid-bg: oklch(0.99 0.004 205);
  --bar-unpaid-fg: oklch(0.50 0.18 25);

  --weekend: oklch(0.975 0.006 205);
  --today-col: oklch(0.47 0.085 205 / 0.07);

  /* Sperrungen im Belegungsplan: schraffiert, neutral */
  --block-bg: var(--n-50);
  --block-stripe: var(--n-200);

  /* Typografie – Skala 1.2 ab 14 px */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-base: 0.875rem;/* 14 */
  --fs-md: 1rem;      /* 16 */
  --fs-lg: 1.25rem;   /* 20 */
  --fs-xl: 1.5rem;    /* 24 */
  --fs-2xl: 2rem;     /* 32 */
  --lh-tight: 1.15;
  --lh-base: 1.5;

  /* Abstände – 4-px-Raster */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px;

  /* Radien – weich */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  /* Schatten – getönt, nur Y-Versatz */
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 205 / 0.06);
  --shadow-md: 0 1px 2px oklch(0.2 0.02 205 / 0.05), 0 4px 10px oklch(0.2 0.02 205 / 0.06);
  --shadow-lg: 0 2px 4px oklch(0.2 0.02 205 / 0.05), 0 10px 24px oklch(0.2 0.02 205 / 0.09), 0 24px 48px oklch(0.2 0.02 205 / 0.06);

  /* Bewegung */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 280ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Objektübersicht: Einrückung für WG-Zimmer, Bedienhöhe */
  --unit-indent: var(--s-6);
  --control-min: 44px;

  /* Kalender */
  /* Markierungen (Tags): fünf Farbtöne mit großem Abstand, nur als Streifen am Balken und als Punkt, nie als Schriftfarbe */
  --tag-violet: oklch(0.52 0.17 300);
  --tag-blue: oklch(0.52 0.15 255);
  --tag-green: oklch(0.56 0.14 150);
  --tag-orange: oklch(0.66 0.16 55);
  --tag-red: oklch(0.55 0.19 20);
  --cal-day-w: 64px; /* Mindestbreite je Tag; bei Platz wird gestreckt */
  --cal-row-h: 60px; /* zweizeilige Balken, etwas größer für die Übersicht (Wunsch 06.11.2026) */
  --cal-side-w: 152px;
  --rail-w: 88px; /* schmale Menüleiste links */
  --rate-w: 60px; /* Mindestbreite einer Tagesspalte im Preisraster */

  color-scheme: light;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(0.17 0.008 205);
    --surface: oklch(0.205 0.009 205);
    --surface-sunken: oklch(0.185 0.008 205);
    --surface-hover: oklch(0.245 0.01 205);
    --border: oklch(0.30 0.012 205);
    --border-subtle: oklch(0.255 0.01 205);
    --border-strong: oklch(0.38 0.014 205);
    --text: oklch(0.95 0.005 205);
    --text-secondary: oklch(0.76 0.012 205);
    --text-muted: oklch(0.66 0.014 205);
    --text-inverted: oklch(0.17 0.008 205);
    --accent: oklch(0.70 0.10 205);
    --accent-hover: oklch(0.76 0.09 205);
    --accent-active: oklch(0.80 0.08 205);
    --accent-fg: oklch(0.17 0.02 205);
    --accent-subtle: oklch(0.27 0.035 205);
    --accent-subtle-strong: oklch(0.32 0.05 205);
    --focus-ring: oklch(0.72 0.10 205 / 0.6);
    --success: oklch(0.72 0.13 160);
    --success-subtle: oklch(0.27 0.04 160);
    --warning: oklch(0.78 0.13 75);
    --warning-subtle: oklch(0.28 0.045 75);
    --danger: oklch(0.70 0.16 25);
    --danger-subtle: oklch(0.28 0.05 25);
    --ch-direct: #00a0b4;
    --ch-booking: #5f88ee;
    --ch-expedia: #c08a10;
    --ch-airbnb: #e2604b;
    --ch-tint: 26%;
    --tag-violet: oklch(0.70 0.15 300);
    --tag-blue: oklch(0.70 0.13 255);
    --tag-green: oklch(0.72 0.13 150);
    --tag-orange: oklch(0.76 0.14 55);
    --tag-red: oklch(0.70 0.16 20);
    --bar-text: oklch(0.96 0.005 205);
    --bar-upcoming: oklch(0.74 0.10 82);
    --bar-upcoming-edge: oklch(0.64 0.11 78);
    --bar-upcoming-text: oklch(0.18 0.01 205);
    --bar-inhouse: oklch(0.62 0.095 205);
    --bar-inhouse-edge: oklch(0.54 0.09 205);
    --bar-inhouse-text: oklch(0.15 0.012 205);
    --bar-past: oklch(0.27 0.01 205);
    --bar-past-edge: oklch(0.33 0.012 205);
    --bar-past-text: oklch(0.74 0.012 205);
    --bar-unpaid-bg: oklch(0.17 0.008 205);
    --bar-unpaid-fg: oklch(0.74 0.15 25);
    --badge-other: oklch(0.45 0.015 205);
    --weekend: oklch(0.19 0.008 205);
    --today-col: oklch(0.70 0.10 205 / 0.10);
    --block-bg: oklch(0.235 0.009 205);
    --block-stripe: oklch(0.29 0.011 205);
    --shadow-sm: 0 0 0 1px oklch(1 0 0 / 0.04);
    --shadow-md: 0 0 0 1px oklch(1 0 0 / 0.05), 0 4px 12px oklch(0 0 0 / 0.35);
    --shadow-lg: 0 0 0 1px oklch(1 0 0 / 0.06), 0 16px 40px oklch(0 0 0 / 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: oklch(0.17 0.008 205);
  --surface: oklch(0.205 0.009 205);
  --surface-sunken: oklch(0.185 0.008 205);
  --surface-hover: oklch(0.245 0.01 205);
  --border: oklch(0.30 0.012 205);
  --border-subtle: oklch(0.255 0.01 205);
  --border-strong: oklch(0.38 0.014 205);
  --text: oklch(0.95 0.005 205);
  --text-secondary: oklch(0.76 0.012 205);
  --text-muted: oklch(0.66 0.014 205);
  --text-inverted: oklch(0.17 0.008 205);
  --accent: oklch(0.70 0.10 205);
  --accent-hover: oklch(0.76 0.09 205);
  --accent-active: oklch(0.80 0.08 205);
  --accent-fg: oklch(0.17 0.02 205);
  --accent-subtle: oklch(0.27 0.035 205);
  --accent-subtle-strong: oklch(0.32 0.05 205);
  --focus-ring: oklch(0.72 0.10 205 / 0.6);
  --success: oklch(0.72 0.13 160);
  --success-subtle: oklch(0.27 0.04 160);
  --warning: oklch(0.78 0.13 75);
  --warning-subtle: oklch(0.28 0.045 75);
  --danger: oklch(0.70 0.16 25);
  --danger-subtle: oklch(0.28 0.05 25);
  --ch-direct: #00a0b4;
  --ch-booking: #5f88ee;
  --ch-expedia: #c08a10;
  --ch-airbnb: #e2604b;
  --ch-tint: 26%;
  --tag-violet: oklch(0.70 0.15 300);
  --tag-blue: oklch(0.70 0.13 255);
  --tag-green: oklch(0.72 0.13 150);
  --tag-orange: oklch(0.76 0.14 55);
  --tag-red: oklch(0.70 0.16 20);
  --bar-text: oklch(0.96 0.005 205);
  --bar-upcoming: oklch(0.74 0.10 82);
  --bar-upcoming-edge: oklch(0.64 0.11 78);
  --bar-upcoming-text: oklch(0.18 0.01 205);
  --bar-inhouse: oklch(0.62 0.095 205);
  --bar-inhouse-edge: oklch(0.54 0.09 205);
  --bar-inhouse-text: oklch(0.15 0.012 205);
  --bar-past: oklch(0.27 0.01 205);
  --bar-past-edge: oklch(0.33 0.012 205);
  --bar-past-text: oklch(0.74 0.012 205);
  --bar-unpaid-bg: oklch(0.17 0.008 205);
  --bar-unpaid-fg: oklch(0.74 0.15 25);
  --badge-other: oklch(0.45 0.015 205);
  --weekend: oklch(0.19 0.008 205);
  --today-col: oklch(0.70 0.10 205 / 0.10);
  --block-bg: oklch(0.235 0.009 205);
  --block-stripe: oklch(0.29 0.011 205);
  --shadow-sm: 0 0 0 1px oklch(1 0 0 / 0.04);
  --shadow-md: 0 0 0 1px oklch(1 0 0 / 0.05), 0 4px 12px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 0 0 1px oklch(1 0 0 / 0.06), 0 16px 40px oklch(0 0 0 / 0.5);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}