/*
 * H24 UX-Standard: Design Tokens (hell und dunkel)
 * Stand: 2026-10-23, Pruefung faellig: 2027-04-23
 *
 * Quelle der Wahrheit fuer Farben: /opt/h24_content_studio/DESIGN.md (H24 Hotels:
 * Petrol #00525e, Tuerkis #00a4bc, Eis #ebf4f5, Text #32373c). Aenderungen dort
 * zuerst, dann diese Datei, dann `python3 tools/ux_check.py kontrast`.
 *
 * Verbindlich fuer neue Tools sind nur diese Variablen (Praefix --hx-), nicht ein
 * Framework. Einbindung in Flask/Jinja, Vite oder Next gleichermassen:
 *   <link rel="stylesheet" href="/static/hx/tokens.css">   (Ordner fonts/ mitkopieren)
 *   <html lang="de" data-theme="light">                    (oder "dark")
 *
 * Eisenregeln:
 *  - Tuerkis (--hx-color-accent) ist Dekoration (Linie, Flaeche mit dunklem Text,
 *    Illustration). Es traegt keinen Text und keine Information, weil es auf Weiss
 *    nur 2,98:1 erreicht.
 *  - Status nie nur ueber Farbe: immer Wort oder Icon dazu (WCAG 1.4.1).
 *  - Schriften liegen lokal (fonts/), kein googleapis, kein CDN.
 *  - Jedes Token-Paar steht in kontrast_paare.json und wird mit
 *    `python3 tools/ux_check.py kontrast` fuer beide Themes nachgerechnet.
 */

/* ---------- Schrift (Roboto, Apache-2.0, selbst gehostet) ---------- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Roboto-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Roboto-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Roboto-Bold.woff2") format("woff2");
}

/* ---------- Helles Theme (Standard) ---------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Flaechen */
  --hx-color-bg: #f4f8f8;
  --hx-color-surface: #ffffff;
  --hx-color-surface-sunken: #ebf4f5;

  /* Text */
  --hx-color-text: #32373c;
  --hx-color-text-muted: #55646b;
  --hx-color-text-akzent: #006878;

  /* Linien */
  --hx-color-border: #cfdadd;          /* nur Dekoration, traegt keine Information */
  --hx-color-border-strong: #6f7f86;   /* Formularfelder und Bedienelemente, mind. 3:1 */

  /* Primaeraktion: Petrol mit Weiss */
  --hx-color-primary: #00525e;
  --hx-color-primary-hover: #003a43;
  --hx-color-on-primary: #ffffff;

  /* Akzent Tuerkis: nur Dekoration, Text darauf immer dunkel */
  --hx-color-accent: #00a4bc;
  --hx-color-on-accent: #00252b;

  /* Fokus */
  --hx-color-focus: #00525e;

  /* Status: Paar aus Flaeche und Text, dazu Rahmen und Vollton */
  --hx-color-success-bg: #e6f4ea;
  --hx-color-success-text: #14532d;
  --hx-color-success-border: #15803d;
  --hx-color-success-solid: #166534;
  --hx-color-success-on-solid: #ffffff;

  --hx-color-warning-bg: #fff4d6;
  --hx-color-warning-text: #6b4200;
  --hx-color-warning-border: #b45309;
  --hx-color-warning-solid: #f59e0b;
  --hx-color-warning-on-solid: #1f2937;

  --hx-color-danger-bg: #fde8e8;
  --hx-color-danger-text: #991b1b;
  --hx-color-danger-border: #b91c1c;
  --hx-color-danger-solid: #b91c1c;
  --hx-color-danger-on-solid: #ffffff;

  --hx-color-info-bg: #ebf4f5;
  --hx-color-info-text: #00525e;
  --hx-color-info-border: #00525e;
  --hx-color-info-solid: #00525e;
  --hx-color-info-on-solid: #ffffff;

  --hx-color-neutral-bg: #e5e7eb;
  --hx-color-neutral-text: #374151;
  --hx-color-neutral-border: #6f7f86;
  --hx-color-neutral-solid: #374151;
  --hx-color-neutral-on-solid: #ffffff;

  --hx-shadow-sm: 0 1px 2px rgba(0, 37, 43, 0.12);
  --hx-shadow-md: 0 4px 12px rgba(0, 37, 43, 0.16);
}

/* ---------- Dunkles Theme ---------- */
[data-theme="dark"] {
  color-scheme: dark;

  --hx-color-bg: #0b1d21;
  --hx-color-surface: #12292e;
  --hx-color-surface-sunken: #1a363c;

  --hx-color-text: #e6eef0;
  --hx-color-text-muted: #a9bcc1;
  --hx-color-text-akzent: #4fd1e3;

  --hx-color-border: #2b4a51;
  --hx-color-border-strong: #6a838a;

  --hx-color-primary: #2cc5da;
  --hx-color-primary-hover: #4fd1e3;
  --hx-color-on-primary: #00252b;

  --hx-color-accent: #00a4bc;
  --hx-color-on-accent: #00252b;

  --hx-color-focus: #7fe0ee;

  --hx-color-success-bg: #12372a;
  --hx-color-success-text: #86efac;
  --hx-color-success-border: #4ade80;
  --hx-color-success-solid: #4ade80;
  --hx-color-success-on-solid: #052e16;

  --hx-color-warning-bg: #3a2e0a;
  --hx-color-warning-text: #fcd34d;
  --hx-color-warning-border: #fbbf24;
  --hx-color-warning-solid: #fbbf24;
  --hx-color-warning-on-solid: #1f1700;

  --hx-color-danger-bg: #3b1414;
  --hx-color-danger-text: #fca5a5;
  --hx-color-danger-border: #f87171;
  --hx-color-danger-solid: #c62828;
  --hx-color-danger-on-solid: #ffffff;

  --hx-color-info-bg: #0f3a43;
  --hx-color-info-text: #a5e8f2;
  --hx-color-info-border: #4fd1e3;
  --hx-color-info-solid: #4fd1e3;
  --hx-color-info-on-solid: #00252b;

  --hx-color-neutral-bg: #243e44;
  --hx-color-neutral-text: #d1dde0;
  --hx-color-neutral-border: #6a838a;
  --hx-color-neutral-solid: #d1dde0;
  --hx-color-neutral-on-solid: #12292e;

  --hx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --hx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* ---------- Schrift, Abstand, Form, Bewegung (themeunabhaengig) ---------- */
:root {
  --hx-font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hx-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --hx-font-weight-regular: 400;
  --hx-font-weight-medium: 500;
  --hx-font-weight-bold: 700;

  /* Groessen in rem, damit die Schrift mit der Browser-Einstellung waechst */
  --hx-text-xs: 0.75rem;   /* nur Nebeninfo, nie allein tragende Information */
  --hx-text-sm: 0.875rem;
  --hx-text-md: 1rem;      /* Standard-Fliesstext und Formularfelder (verhindert Zoom auf iOS) */
  --hx-text-lg: 1.125rem;
  --hx-text-xl: 1.25rem;
  --hx-text-2xl: 1.5rem;
  --hx-text-3xl: 1.875rem;

  --hx-leading-tight: 1.25;
  --hx-leading-normal: 1.5;

  /* Abstandsraster 4 px */
  --hx-space-1: 0.25rem;
  --hx-space-2: 0.5rem;
  --hx-space-3: 0.75rem;
  --hx-space-4: 1rem;
  --hx-space-5: 1.25rem;
  --hx-space-6: 1.5rem;
  --hx-space-8: 2rem;
  --hx-space-10: 2.5rem;
  --hx-space-12: 3rem;
  --hx-space-16: 4rem;

  --hx-radius-sm: 4px;
  --hx-radius-md: 8px;
  --hx-radius-lg: 12px;
  --hx-radius-full: 9999px;

  /* Bedienelemente: Hausregel 44 px; WCAG 2.2 AA verlangt mindestens 24 px */
  --hx-target-min: 44px;
  --hx-target-wcag-min: 24px;
  --hx-target-gap: 8px;

  --hx-focus-ring-width: 3px;
  --hx-focus-ring-offset: 2px;

  --hx-duration-fast: 120ms;
  --hx-duration-base: 200ms;
  --hx-easing: cubic-bezier(0.2, 0, 0, 1);

  --hx-z-dropdown: 100;
  --hx-z-sticky: 200;
  --hx-z-modal: 300;
  --hx-z-toast: 400;
}

/* ---------- Minimale Basis (keine Komponenten) ---------- */
html {
  font-family: var(--hx-font-sans);
  font-size: 100%;               /* nie px setzen, sonst wirkt die Browser-Schriftgroesse nicht */
  line-height: var(--hx-leading-normal);
  color: var(--hx-color-text);
  background: var(--hx-color-bg);
  -webkit-text-size-adjust: 100%;
}

:focus-visible {
  outline: var(--hx-focus-ring-width) solid var(--hx-color-focus);
  outline-offset: var(--hx-focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.hx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}