/*
 * Design-Tokens der VEBS-Verwaltung (UI-KONZEPT 4.1), abgeleitet aus der Personal-App.
 * EINZIGE Datei mit Farbwerten: base.css und komponenten.css verwenden nur var(--…).
 * Ein Test (tests/test_konventionen.py) findet Farbwerte außerhalb dieser Datei.
 *
 * Hell ist Standard. Dunkel greift über prefers-color-scheme oder den Umschalter im Nutzermenü
 * (html[data-theme="dark"|"light"]). [data-theme] wirkt auch auf einzelne Container (Styleguide).
 * Kontraste nach WCAG 2.x nachgerechnet; Werte und Begründungen stehen in UI-KONZEPT 4.1.
 *
 * Nebentext auf getönten Flächen (hell, AA verlangt 4,5:1):
 *                     --surface-2  --accent-soft  --warning-soft  --success-soft  --critical-soft
 *   --ink-muted          4,28         4,26           4,45            3,74            4,14     (zu wenig)
 *   --ink-muted-on-tint  5,36         5,34           5,57            4,68            5,18
 * Deshalb setzen getönte Komponenten --ink-muted lokal auf --ink-muted-on-tint (komponenten.css).
 * Dunkel liegt --ink-muted auf allen Flächen über 5:1. Gefahrknopf beim Überfahren: Weiß auf --critical wären
 * 4,48:1; --critical-hover hat 8,87:1 (dunkel: 8,97:1 mit --on-critical).
 * tests/test_konventionen.py rechnet diese Paare bei jeder Änderung nach.
 */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Flächen und Text */
  --bg: #F3F7FA;
  --surface: #FFFFFF;
  --surface-2: #E6EEF3;
  --ink: #152233;
  --ink-muted: #5E7185;              /* 5,03:1 auf Weiß, 4,67:1 auf --bg */
  --ink-muted-on-tint: #4F6275;      /* Nebentext auf getönten Flächen, mindestens 4,68:1 (Tabelle oben) */
  --border: #DCE6ED;                 /* nur dekorativ */
  --control-border: #7C8E9C;         /* Ränder von Eingabefeldern, 3,38:1 (WCAG 1.4.11) */

  /* Akzent */
  --accent: #1487A0;                 /* Flächen, Icons, große Schrift – nicht für normalen Text */
  --accent-2: #0E6B80;               /* Primärknopf-Fläche, Links, 6,12:1 mit Weiß */
  --accent-2-hover: #0B5869;
  --on-accent: #FFFFFF;
  --accent-soft: #DCF0F4;            /* aktive Navigation, Auswahl; --accent-2 darauf 5,19:1 */
  --accent-grad: linear-gradient(135deg, #12A0BE, #0B6B82);
  --avatar-grad: linear-gradient(135deg, #D1568F, #A8386F);
  --on-avatar: #FFFFFF;

  /* Status: Fläche, weiche Fläche, Text */
  --success: #0A5C33;
  --success-soft: #BFE8CC;
  --warning: #DB9A2E;                /* nur Flächen, Rahmen, Icons (als Text 2,42:1) */
  --warning-soft: #FBF0DA;
  --warning-ink: #8A5A00;            /* Warntext, 5,24:1 auf --warning-soft */
  --critical: #D3453B;
  --critical-soft: #FBE4E1;
  --critical-ink: #B3261E;           /* Fehlertext und Gefahrknopf-Fläche, 6,54:1 */
  --critical-hover: #8F1E18;         /* Gefahrknopf beim Überfahren, 8,87:1 mit Weiß */
  --on-critical: #FFFFFF;

  /* Fokus und Versandmodus */
  --focus-ring: #0E6B80;
  --mode-test-bg: var(--warning-soft);
  --mode-test-ink: var(--warning-ink);
  --mode-live-bg: var(--critical-ink);
  --mode-live-ink: #FFFFFF;

  /* Objekttypen (Icons in Suche und Links, immer mit Text) */
  --typ-traeger: #1487A0;
  --typ-einrichtung: #3D74E0;
  --typ-person: #C0478F;
  --typ-veranstaltung: #0A5C33;

  /* Schatten und Überlagerung */
  --shadow: 0 1px 2px rgba(21, 34, 51, .05), 0 8px 22px -12px rgba(21, 34, 51, .16);
  --shadow-lift: 0 14px 28px -18px rgba(21, 34, 51, .24);
  --shadow-dialog: 0 24px 48px -16px rgba(21, 34, 51, .35);
  --overlay: rgba(21, 34, 51, .4);
  --marke-glow: 0 6px 16px -6px rgba(20, 135, 160, .55);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1720;
  --surface: #16212C;
  --surface-2: #1C2932;
  --ink: #E7EEF2;
  --ink-muted: #93A7B4;
  --ink-muted-on-tint: #93A7B4;
  --border: #263842;
  --control-border: #6B7F8C;
  --accent: #5FC3D8;
  --accent-2: #7FD4E5;
  --accent-2-hover: #9BDDEB;
  --on-accent: #0E1720;              /* dunkle Schrift auf hellem Akzent, 10,71:1 (behebt 1,69:1) */
  --accent-soft: #16323A;
  --accent-grad: linear-gradient(135deg, #5FC3D8, #2E8FA6);
  --avatar-grad: linear-gradient(135deg, #E184BC, #B85A92);
  --on-avatar: #0E1720;
  --success: #6FCB8F;
  --success-soft: #17301F;
  --warning: #EBB85C;
  --warning-soft: #332708;
  --warning-ink: #EBB85C;
  --critical: #E68078;
  --critical-soft: #3A1712;
  --critical-ink: #E68078;
  --critical-hover: #F0A39C;
  --on-critical: #0E1720;
  --focus-ring: #7FD4E5;
  --mode-live-bg: #E68078;
  --mode-live-ink: #0E1720;
  --typ-traeger: #5FC3D8;
  --typ-einrichtung: #8FADF0;
  --typ-person: #E184BC;
  --typ-veranstaltung: #6FCB8F;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 22px -12px rgba(0, 0, 0, .6);
  --shadow-lift: 0 14px 28px -18px rgba(0, 0, 0, .7);
  --shadow-dialog: 0 24px 48px -16px rgba(0, 0, 0, .8);
  --overlay: rgba(0, 0, 0, .55);
  --marke-glow: 0 6px 16px -6px rgba(95, 195, 216, .45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E1720;
    --surface: #16212C;
    --surface-2: #1C2932;
    --ink: #E7EEF2;
    --ink-muted: #93A7B4;
    --ink-muted-on-tint: #93A7B4;
    --border: #263842;
    --control-border: #6B7F8C;
    --accent: #5FC3D8;
    --accent-2: #7FD4E5;
    --accent-2-hover: #9BDDEB;
    --on-accent: #0E1720;
    --accent-soft: #16323A;
    --accent-grad: linear-gradient(135deg, #5FC3D8, #2E8FA6);
    --avatar-grad: linear-gradient(135deg, #E184BC, #B85A92);
    --on-avatar: #0E1720;
    --success: #6FCB8F;
    --success-soft: #17301F;
    --warning: #EBB85C;
    --warning-soft: #332708;
    --warning-ink: #EBB85C;
    --critical: #E68078;
    --critical-soft: #3A1712;
    --critical-ink: #E68078;
    --critical-hover: #F0A39C;
    --on-critical: #0E1720;
    --focus-ring: #7FD4E5;
    --mode-live-bg: #E68078;
    --mode-live-ink: #0E1720;
    --typ-traeger: #5FC3D8;
    --typ-einrichtung: #8FADF0;
    --typ-person: #E184BC;
    --typ-veranstaltung: #6FCB8F;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 22px -12px rgba(0, 0, 0, .6);
    --shadow-lift: 0 14px 28px -18px rgba(0, 0, 0, .7);
    --shadow-dialog: 0 24px 48px -16px rgba(0, 0, 0, .8);
    --overlay: rgba(0, 0, 0, .55);
    --marke-glow: 0 6px 16px -6px rgba(95, 195, 216, .45);
  }
}

:root {
  /* Schrift */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-h3: 19px;
  --fs-h2: 22px;
  --fs-h1: 26px;
  --fs-stat: 30px;
  --lh-text: 1.55;
  --lh-titel: 1.25;

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

  /* Radien */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Dichte und Maße */
  --row-h: 44px;
  --row-h-compact: 36px;
  --ziel-min: 24px;                  /* WCAG 2.5.8 */
  --ziel-touch: 44px;
  --breite-lesen: 1080px;
  --breite-steckbrief: 340px;
  --sidebar-breite: 260px;
  --sidebar-schmal: 76px;
  --topbar-h: 60px;

  /* Bewegung (bei prefers-reduced-motion aus, siehe base.css) */
  --dauer: 150ms;
  --skelett-verzoegerung: 300ms;
}

/* Breakpoints (in Media-Queries nicht als Variable nutzbar): 640px, 860px, 1280px */