/**
 * @glassfull/ui — Design-Tokens „Aqua“
 * Gesetz: docs/DESIGN_SYSTEM.md v2.0 (§2 Namensschema, §3 Farbwerte, §4 Typografie,
 * §6 Radien/Glas/Schatten, §7 Bewegung, §11 Dark-Mode)
 *
 * EINZIGE Stelle im Code mit Roh-Farbwerten (Gesetz §3 + Verbot §10.2).
 * Dark-Mode: Class-Strategy — `class="dark"` auf <html> (Gesetz §11).
 * Ableitungen (-subtle, -hover, -active, -glow, Glas-Füllungen) leben ebenfalls
 * NUR hier (Gesetz §3). Quelle der Werte: design/tokens/glassfull.css.
 *
 * Der Vollständigkeits-Test (src/tokens/tokens.test.ts) parst diese Datei:
 * jeder `--ui-*`-Key im Light-Block MUSS auch im Dark-Block definiert sein
 * (und umgekehrt). Keys im gemeinsamen Block `:root, .light, .dark` gelten
 * für beide Themes; dort steht alles, was in Light und Dark gleich ist.
 */

/*
 * Light ist der Default (:root). Die `.light`-Klasse spiegelt den Dark-Block
 * (§11): damit lässt sich in einem Dark-Kontext eine Light-Insel erzwingen
 * (z. B. im Katalog beide Themes nebeneinander) — ohne Werte-Duplikat.
 */
:root,
.light {
  color-scheme: light;

  /* ---- Surfaces (§3) ---- */
  --ui-surface: #f5f7f9; /* Papier */
  --ui-surface-raised: #ffffff;
  /* Hover = eine Surface-Stufe anheben (§7) */
  --ui-surface-hover: #eef2f6;

  /* ---- Borders (§3) ---- */
  --ui-border: #dfe5ec;
  --ui-border-muted: #eef2f6;

  /* ---- Text (§3) ---- */
  --ui-text-primary: #0d1626; /* Tinte */
  --ui-text-secondary: #4a5568;
  --ui-text-muted: #5f6f82; /* 5,2:1 auf Weiß */

  /* ---- Akzent Blau (§3): accent für Flächen, accent-text für Text und Links (5,5:1 auf Weiß) ---- */
  --ui-accent: #1a6dff;
  --ui-accent-text: #0f5fe6;
  --ui-accent-foreground: #ffffff;
  --ui-accent-hover: #0f5fe6;
  --ui-accent-active: #0b47c2;
  --ui-accent-subtle: color-mix(in srgb, #1a6dff 10%, #ffffff);
  --ui-accent-glow: color-mix(in srgb, #1a6dff 30%, transparent);

  /* ---- Marken-Verlauf (§0) ---- */
  --ui-brand-g1: #1a6dff;
  --ui-brand-g2: #12bfae;
  /* Zeichen unter 32 px: Light im Verlauf, Dark einfarbig Mint (§0). */
  --ui-brand-klein-g1: var(--ui-brand-g1);
  --ui-brand-klein-g2: var(--ui-brand-g2);

  /* ---- Ampel-Semantik (§2/§3): success/warn/danger ---- */
  --ui-danger: #d1281f;
  --ui-danger-foreground: #ffffff;
  --ui-danger-hover: #b31f17;
  --ui-danger-subtle: color-mix(in srgb, #d1281f 10%, #ffffff);
  --ui-warn: #c96a00;
  --ui-warn-foreground: #ffffff;
  --ui-warn-hover: #a85800;
  --ui-warn-subtle: color-mix(in srgb, #c96a00 10%, #ffffff);
  --ui-success: #0b8f5a;
  --ui-success-foreground: #ffffff;
  --ui-success-hover: #09774b;
  --ui-success-subtle: color-mix(in srgb, #0b8f5a 10%, #ffffff);

  /* ---- Hintergrund „Lagune“ (§1): Himmel oben links, Mint unten rechts, auf Papier ---- */
  --ui-bg-base: #f5f7f9;
  --ui-bg-tint-a: var(--ui-sky);
  --ui-bg-tint-b: var(--ui-mint);
  --ui-bg-gradient:
    radial-gradient(70% 40% at 0% 0%, var(--ui-bg-tint-a) 0%, transparent 60%),
    radial-gradient(50% 40% at 100% 100%, var(--ui-bg-tint-b) 0%, transparent 60%),
    var(--ui-bg-base);

  /* ---- Schatten (§6, genau 3 Stufen) ---- */
  --ui-shadow-sm: 0 1px 2px rgba(13, 22, 38, 0.05);
  --ui-shadow-md: 0 4px 12px rgba(13, 22, 38, 0.08);
  --ui-shadow-lg: 0 12px 32px rgba(13, 22, 38, 0.14);
  --ui-overlay: rgba(13, 22, 38, 0.4); /* Tinte 40 % hinter Dialog und Sheet (§6) */

  /* ---- Liquid Glass (§6): chrome (Header, Hüllen) · card (schwebend im Inhalt) · control (Buttons, Pills) ---- */
  --ui-glass-fill-chrome: rgba(255, 255, 255, 0.56);
  --ui-glass-fill-card: rgba(255, 255, 255, 0.72);
  --ui-glass-fill-control: rgba(255, 255, 255, 0.86);
  /* Fallback ohne Blur / reduzierte Transparenz */
  --ui-glass-fill-strong: rgba(255, 255, 255, 0.92);
  --ui-glass-edge: rgba(255, 255, 255, 0.95); /* Lichtkante oben */
  --ui-glass-rim: rgba(255, 255, 255, 0.6); /* Außenrand hell */
  --ui-glass-rim-dark: rgba(13, 22, 38, 0.08); /* Außenrand unten/Kontrast */
  --ui-glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%);
  --ui-glass-tint: inset 0 -12px 24px -12px rgba(26, 109, 255, 0.14); /* Aqua-Hauch unten */
  --ui-glass-shadow-card: 0 1px 2px rgba(13, 22, 38, 0.04), 0 12px 32px -16px rgba(13, 22, 38, 0.16);
  --ui-glass-shadow-chrome: 0 1px 2px rgba(13, 22, 38, 0.04), 0 20px 50px -24px rgba(13, 22, 38, 0.16);
  --ui-glass-hero-glow: 0 -30px 80px -40px rgba(26, 109, 255, 0.4);

  /* ---- Primär-Button (§7): Marken-Verlauf mit Glas-Tiefe ---- */
  --ui-accent-glass-bg: linear-gradient(135deg, #2f7dff 0%, var(--ui-accent) 45%, #10b3a6 100%);

  /* ---- Füllstand-Glas des Zeichens (§9): leerer Rest ---- */
  --ui-fuellstand-leer: #e3edf9;
}

/*
 * Dark ist kein Invert, sondern eigene Abstimmung (§3): Nacht statt Papier,
 * Schatten mit höherer Alpha (§6), Glas mit Weiß-Füllung und Mint-Glow.
 */
.dark {
  color-scheme: dark;

  /* ---- Surfaces ---- */
  --ui-surface: #070e1c; /* Nacht */
  --ui-surface-raised: #0f1829;
  --ui-surface-hover: #182335;

  /* ---- Borders ---- */
  --ui-border: #1f2b3f;
  --ui-border-muted: #162133;

  /* ---- Text ---- */
  --ui-text-primary: #eef3fa;
  --ui-text-secondary: #b4c0d1;
  --ui-text-muted: #8795a8;

  /* ---- Akzent: dunkler Foreground (Nacht), damit der Primär-Button 4,5:1 hält (§3) ---- */
  --ui-accent: #7fb3ff;
  --ui-accent-text: #7fb3ff;
  --ui-accent-foreground: #070e1c;
  --ui-accent-hover: #9cc5ff;
  --ui-accent-active: #b8d6ff;
  --ui-accent-subtle: color-mix(in srgb, #7fb3ff 16%, #0f1829);
  --ui-accent-glow: color-mix(in srgb, #5fe3d3 30%, transparent);

  /* ---- Marken-Verlauf ---- */
  --ui-brand-g1: #9fd0ff; /* Zeichen auf Nacht: Himmelblau → Mint hell */
  --ui-brand-g2: #5fe3d3;
  --ui-brand-klein-g1: var(--ui-aqua-light);
  --ui-brand-klein-g2: var(--ui-aqua-light);

  /* ---- Ampel-Semantik ---- */
  --ui-danger: #ff8a80;
  --ui-danger-foreground: #070e1c;
  --ui-danger-hover: #ffa9a1;
  --ui-danger-subtle: color-mix(in srgb, #ff8a80 16%, #0f1829);
  --ui-warn: #ffb547;
  --ui-warn-foreground: #070e1c;
  --ui-warn-hover: #ffc876;
  --ui-warn-subtle: color-mix(in srgb, #ffb547 16%, #0f1829);
  --ui-success: #4fd59b;
  --ui-success-foreground: #070e1c;
  --ui-success-hover: #7de3b5;
  --ui-success-subtle: color-mix(in srgb, #4fd59b 16%, #0f1829);

  /* ---- Hintergrund „Tiefsee“: Türkis unten links, Blau oben rechts, auf Nacht ---- */
  --ui-bg-base: #070e1c;
  --ui-bg-tint-a: rgba(26, 109, 255, 0.5);
  --ui-bg-tint-b: rgba(18, 191, 174, 0.42);
  --ui-bg-gradient:
    radial-gradient(50% 60% at 92% -12%, var(--ui-bg-tint-a) 0%, transparent 62%),
    radial-gradient(60% 70% at 14% 112%, var(--ui-bg-tint-b) 0%, transparent 62%),
    var(--ui-bg-base);

  /* ---- Schatten ---- */
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ui-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --ui-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  /* Dark: Schwarz 60 % statt Tinte 40 %, weil Tinte auf Nacht unsichtbar wäre; Gesetz-Nachtrag folgt. */
  --ui-overlay: rgba(0, 0, 0, 0.6);

  /* ---- Liquid Glass ---- */
  --ui-glass-fill-chrome: rgba(255, 255, 255, 0.08);
  --ui-glass-fill-card: rgba(255, 255, 255, 0.1);
  --ui-glass-fill-control: rgba(255, 255, 255, 0.12);
  --ui-glass-fill-strong: rgba(15, 24, 41, 0.94);
  --ui-glass-edge: rgba(255, 255, 255, 0.22);
  --ui-glass-rim: rgba(255, 255, 255, 0.1);
  --ui-glass-rim-dark: rgba(0, 0, 0, 0.35);
  --ui-glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%);
  --ui-glass-tint: inset 0 -14px 28px -12px rgba(95, 227, 211, 0.2);
  --ui-glass-shadow-card: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
  --ui-glass-shadow-chrome: 0 12px 28px -14px rgba(0, 0, 0, 0.6), 0 0 50px -16px rgba(95, 227, 211, 0.2);
  --ui-glass-hero-glow: 0 -30px 80px -40px rgba(95, 227, 211, 0.35);

  /* ---- Primär-Button ---- */
  --ui-accent-glass-bg: linear-gradient(135deg, #2f7dff 0%, #1a6dff 45%, #10b3a6 100%);

  /* ---- Füllstand-Glas ---- */
  --ui-fuellstand-leer: rgba(255, 255, 255, 0.1);
}

/*
 * Theme-unabhängig: Blur-Stufen, Glas-Rezepte, Radien, Layout, Bewegung,
 * Marketing-Stufen. Bewusst auch auf `.light` und `.dark` deklariert: Custom
 * Properties werden dort aufgelöst, wo sie stehen. Stünden die Rezepte nur auf
 * :root, erbte eine Dark-Insel in einer Light-Seite (Tiefsee-Flächen der
 * Landingpage) die schon aufgelösten hellen Füllungen.
 */
:root,
.light,
.dark {
  /* ---- Schrift (§4): Geist, Werte in JetBrains Mono ---- */
  /* `--font-geist-sans` setzt next/font (geist) bzw. der Ladle-Katalog. */
  --ui-font-sans: var(--font-geist-sans, "Geist"), system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Licht Türkis (§0): nur Verlauf, Icon, Glow. Nie Text, nie Status. ---- */
  --ui-aqua: #12bfae;
  --ui-aqua-light: #5fe3d3;
  --ui-sky: #cfe3ff;
  --ui-mint: #bff0e8;
  /* Verläufe lösen --ui-brand-g1/-g2 des jeweiligen Themes auf. */
  --ui-brand-gradient: linear-gradient(135deg, var(--ui-brand-g1), var(--ui-brand-g2));
  --ui-brand-tile: linear-gradient(160deg, #4a93ff 0%, #1a6dff 38%, #12bfae 100%);

  /* ---- Primär-Button (§7): Tiefe, Glow aus dem Theme ---- */
  --ui-accent-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 8px 20px -6px var(--ui-accent-glow);

  /* ---- Blur (§6): Controls · Chrome und Cards · Sheet-Overlay ---- */
  --ui-blur-sm: 8px;
  --ui-blur-md: 22px;
  --ui-blur-lg: 32px;
  --ui-glass-saturate: 1.5;

  /* ---- Glas-Rezepte (§6): eine Zeile pro Stufe ---- */
  --ui-glass-chrome-bg: var(--ui-glass-fill-chrome);
  --ui-glass-chrome-filter: blur(var(--ui-blur-md)) saturate(var(--ui-glass-saturate));
  --ui-glass-chrome-shadow:
    inset 0 1px 0 var(--ui-glass-edge), inset 0 0 0 1px var(--ui-glass-rim), var(--ui-glass-tint),
    var(--ui-glass-shadow-chrome);
  --ui-glass-card-bg: var(--ui-glass-fill-card);
  --ui-glass-card-filter: blur(var(--ui-blur-md)) saturate(var(--ui-glass-saturate));
  --ui-glass-card-shadow:
    inset 0 1px 0 var(--ui-glass-edge), inset 0 0 0 1px var(--ui-glass-rim), var(--ui-glass-shadow-card);
  --ui-glass-control-bg: var(--ui-glass-fill-control);
  --ui-glass-control-filter: blur(var(--ui-blur-sm)) saturate(var(--ui-glass-saturate));
  --ui-glass-control-shadow:
    inset 0 1px 0 var(--ui-glass-edge), inset 0 0 0 1px var(--ui-glass-rim), 0 1px 2px rgba(13, 22, 38, 0.06);

  /* ---- Radien (§6), konzentrisch: Hülle 28 · Panel 20 · Karte 14 · Button 12 · Input 8 · 6 ---- */
  --ui-radius-xs: 6px; /* Checkbox, Icon-Kacheln 16–24 */
  --ui-radius-sm: 8px; /* Inputs, Nav-Items, Tabellen-Karte */
  --ui-radius-control: 12px; /* Buttons, eckige Pills, Felder in Sheets */
  --ui-radius-md: 14px; /* Karten im Inhalt, Popover */
  --ui-radius-lg: 20px; /* Panels, Sidebar-Kopf, Toasts */
  --ui-radius-xl: 28px; /* Glas-Hüllen, Sheets, Mobile-Shell */
  --ui-radius-full: 9999px; /* Pills, Avatare, Tab-Bar-Pille */

  /* ---- Abstände und Layout (§5): 4-px-Raster ---- */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;
  --ui-space-12: 48px;
  --ui-space-16: 64px;
  --ui-space-24: 96px;
  --ui-row-comfortable: 44px;
  --ui-field-py-comfortable: 10px;
  --ui-row-compact: 32px;
  --ui-field-py-compact: 6px;
  --ui-hit-min: 44px; /* Touch-Ziel, nie darunter */
  --ui-sidebar-w: 256px;
  --ui-sidebar-w-collapsed: 64px;
  --ui-content-max: 1152px;

  /* ---- Bewegung (§7): kurz, funktional, kein Bounce ---- */
  --ui-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ui-ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ui-dur-fast: 120ms; /* Hover, Press, Fokus */
  --ui-dur: 200ms; /* Sheet, Tab */
  --ui-dur-slow: 700ms; /* Seitenaufbau */

  /* ---- Marketing-Stufen (§4): nur Landingpage, Print, Social ---- */
  --ui-ms-hero-lg: 80px;
  --ui-ms-hero-lg-lh: 84px;
  --ui-ms-hero: 56px;
  --ui-ms-hero-lh: 60px;
  --ui-ms-h2: 48px;
  --ui-ms-h2-lh: 52px;
  --ui-ms-h3: 20px;
  --ui-ms-h3-lh: 26px;
  --ui-ms-lead: 19px;
  --ui-ms-lead-lh: 28px;
  --ui-ms-body: 15px;
  --ui-ms-body-lh: 23px;
  --ui-ms-zahl: 56px;
  --ui-ms-zahl-lh: 56px;
  --ui-ms-zahl-sm: 32px;
  --ui-ms-zahl-sm-lh: 34px;
}

/* Apple-Fallbacks (§6): ohne backdrop-filter, bei reduzierter Transparenz oder
 * mehr Kontrast opak; bei forced-colors Systemfarben. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root,
  .light,
  .dark {
    --ui-glass-chrome-bg: var(--ui-glass-fill-strong);
    --ui-glass-card-bg: var(--ui-glass-fill-strong);
    --ui-glass-control-bg: var(--ui-glass-fill-strong);
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root,
  .light,
  .dark {
    --ui-glass-chrome-bg: var(--ui-glass-fill-strong);
    --ui-glass-card-bg: var(--ui-glass-fill-strong);
    --ui-glass-control-bg: var(--ui-glass-fill-strong);
    --ui-glass-chrome-filter: none;
    --ui-glass-card-filter: none;
    --ui-glass-control-filter: none;
    --ui-glass-rim: var(--ui-border);
  }
}
@media (forced-colors: active) {
  :root,
  .light,
  .dark {
    --ui-glass-chrome-bg: Canvas;
    --ui-glass-card-bg: Canvas;
    --ui-glass-control-bg: ButtonFace;
    --ui-glass-chrome-filter: none;
    --ui-glass-card-filter: none;
    --ui-glass-control-filter: none;
    --ui-glass-chrome-shadow: inset 0 0 0 1px ButtonText;
    --ui-glass-card-shadow: inset 0 0 0 1px ButtonText;
    --ui-glass-control-shadow: inset 0 0 0 1px ButtonText;
  }
}

/* Füllstand: Verlauf steigt beim Laden einmal von unten (einzige Idle-Ausnahme, §7).
 * Die Animation selbst setzt das Utility `animate-fuellstand` (preset.css). */
@keyframes ui-fuellstand {
  from {
    transform: translateY(78px);
  }
  to {
    transform: none;
  }
}
.animate-fuellstand {
  transform-box: view-box;
}
@media (prefers-reduced-motion: reduce) {
  .animate-fuellstand {
    animation: none;
  }
}