/*
 * Design-Tokens — hell + dunkel (ARCHITEKTUR-DESIGN.md §2/§3/§4/§5/§6).
 * Ausgeliefert, wird bei Updates UEBERSCHRIEBEN — Betreiber fasst diese Datei nie an
 * (Overrides gehoeren in /themes/custom.css).
 *
 * Drei-Block-Struktur (Spezifitaets-Regel §2): hell `:root` (0,1,0) / dunkel
 * `:root[data-theme="dark"]` (0,2,0) / dunkel-Media-Query
 * `:root:not([data-theme="light"])` (0,2,0) — der Inline-Block aus
 * DesignTokens::inlineCss() und das custom.css-Skelett verwenden EXAKT dieselbe
 * Struktur, damit die Dokumentreihenfolge (nicht ein Spezifitaets-Unfall) entscheidet.
 *
 * `color-scheme` steht NUR hier (statischer Token, kein Admin-Wert) — Abweichung von
 * ARCHITEKTUR-DESIGN.md §4 (dort `:root { color-scheme: light dark; }`), s. HANDOVER §9
 * Punkt 1: der manuelle Umschalter braucht `light` bzw. `dark` GEZIELT, nicht
 * `light dark` (das folgt nur der Geraete-Einstellung und wuerde z. B. dunkle
 * Scrollbars auf bewusst hell umgeschaltetem Inhalt zeigen).
 */

:root {
  color-scheme: light;

  /* Farben (ARCHITEKTUR-DESIGN.md §3) */
  --color-bg: #ffffff;
  --color-surface: #f5f5f4;
  --color-text: #1c1917;
  --color-text-muted: #57534e;
  --color-border: #d6d3d1;
  --color-border-strong: #79716b;
  --color-primary: #0f766e;
  --color-on-primary: #ffffff;
  --color-primary-hover: #115e59;
  --color-link: var(--color-primary);
  --color-focus: var(--color-primary);
  --color-success: #15803d;
  --color-on-success: #ffffff;
  --color-warning: #a16207;
  --color-on-warning: #ffffff;
  --color-error: #b91c1c;
  --color-on-error: #ffffff;
  /* Hero-Scrim (ARCHITEKTUR-DESIGN.md §10): Alpha 0.6 auf Schwarz-Basis, faellt im
     WORST CASE (Text #f5f5f4 auf weissem Bild) auf Kontrast 5.26 (>= 4.5). Gilt
     modusunabhaengig (Bild-Overlay, kein Theme-Wert) — deshalb nur hier, nicht in den
     Dunkel-Bloecken dupliziert. */
  --color-scrim: rgba(0, 0, 0, 0.6);

  /* Typografie (§5) — Fallback-Stack, wird von DesignTokens::inlineCss() ueberschrieben
     (gleiche Spezifitaet, spaetere Position in der Kaskade gewinnt, §2). */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid-Skala clamp() — Basis 1rem -> 1.125rem zwischen 320px und 1280px,
     Stufenverhaeltnis ~1.25 (§5). --text-sm hat einen angehobenen Mindestwert
     (0.875rem statt des rechnerischen 0.8rem): "Kleingedrucktes = sm, nie unter
     0.875rem" ist eine HARTE Grenze der Spezifikation, kein Rundungsfehler. */
  --text-xs: clamp(0.64rem, 0.6133rem + 0.0083vw, 0.72rem);
  --text-sm: clamp(0.875rem, 0.8667rem + 0.0026vw, 0.9rem);
  --text-base: clamp(1rem, 0.9583rem + 0.013vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1.1979rem + 0.0163vw, 1.4062rem);
  --text-xl: clamp(1.5625rem, 1.4974rem + 0.0203vw, 1.7578rem);
  --text-2xl: clamp(1.9531rem, 1.8717rem + 0.0254vw, 2.1973rem);
  --text-3xl: clamp(2.4414rem, 2.3397rem + 0.0318vw, 2.7466rem);
  --text-4xl: clamp(3.0518rem, 2.9246rem + 0.0397vw, 3.4332rem);
  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --measure: 65ch;

  /* Abstaende, 4er-Basis (§6) */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 6rem;

  /* Form (§6) */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.08);
  --shadow-md: 0 4px 8px rgba(28, 25, 23, 0.1);
  --shadow-lg: 0 10px 20px rgba(28, 25, 23, 0.12);
  --container-max: 72rem;
}

/* SYNC-BLOCK dark — Änderungen IMMER in beiden Blöcken */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #1c1917;
  --color-surface: #292524;
  --color-text: #f5f5f4;
  --color-text-muted: #a8a29e;
  --color-border: #44403c;
  --color-border-strong: #78716c;
  --color-primary: #2dd4bf;
  --color-on-primary: #1c1917;
  --color-primary-hover: #5eead4;
  --color-success: #4ade80;
  --color-on-success: #1c1917;
  --color-warning: #fbbf24;
  --color-on-warning: #1c1917;
  --color-error: #f87171;
  --color-on-error: #1c1917;
  /* Schatten tragen auf dunklem Grund kaum — schwaecher als im Hellmodus,
     --color-border traegt die Tiefenwirkung stattdessen (§6). */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.28);
}

@media (prefers-color-scheme: dark) {
  /* SYNC-BLOCK dark — Änderungen IMMER in beiden Blöcken */
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #1c1917;
    --color-surface: #292524;
    --color-text: #f5f5f4;
    --color-text-muted: #a8a29e;
    --color-border: #44403c;
    --color-border-strong: #78716c;
    --color-primary: #2dd4bf;
    --color-on-primary: #1c1917;
    --color-primary-hover: #5eead4;
    --color-success: #4ade80;
    --color-on-success: #1c1917;
    --color-warning: #fbbf24;
    --color-on-warning: #1c1917;
    --color-error: #f87171;
    --color-on-error: #1c1917;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.24);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.28);
  }
}