/* =========================================================================
   UNBREAKABLE — Design-Tokens
   -------------------------------------------------------------------------
   Regel: CHROMA gehört dem Theme, NEUTRALE gehören dem Modus.
   Eine Farbwelt ([data-theme]) besitzt ausschließlich die 13 Chroma-Tokens
   und fasst Flächen, Ränder, Text und Semantik NIEMALS an. Dadurch ist der
   Oberflächenkontrast strukturell unangreifbar — geprüft werden muss nur
   noch Akzent gegen Oberfläche.

   Reihenfolge der Blöcke ist ZWINGEND: 2, 3 und 4 haben dieselbe
   Spezifität (0,1,0), also entscheidet die Quellreihenfolge.
     1) :root                                → modusneutral
     2) :root, [data-mode="dark"]            → Neutrale + Semantik dunkel
     3) [data-mode="light"]                  → Neutrale + Semantik hell
     4) [data-theme="x"]                     → Chroma dunkel
     5) [data-mode="light"][data-theme="x"]  → Chroma hell (0,2,0 — gewinnt)

   Kein color-mix(): braucht Safari 16.2+, und es gibt keinen Build-Step,
   der einen Fallback erzeugen könnte. Alpha-Werte sind literal und je
   Modus verschieden — dieselbe Deckkraft wirkt über Schwarz und über Weiß
   völlig unterschiedlich.
   ========================================================================= */

/* ---------- 1) Modusneutral ---------- */
:root {
    /* Radius */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 100px;

    /* Type */
    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Outfit', sans-serif;

    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}

/* ---------- 2) Dunkler Modus (Default) ---------- */
:root,
[data-mode="dark"] {
    color-scheme: dark;

    /* Ground & surfaces (neutral, faint warm bias) */
    --bg: #0b0b0c;
    --surface: #151517;
    --surface-2: #1d1d20;
    --surface-3: #26262a;

    /* Hairlines */
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.13);

    /* Text */
    --text: #fafafa;
    --text-secondary: #9a9aa0;
    /* Angehoben von #6a6a70: das lag mit 3.4:1 unter AA und betraf sämtliche
       Mikro-Labels. Einzige bewusste Sichtänderung im Dunkelmodus. */
    --text-muted: #8a8a92;

    /* Semantik — modus-eigen, NIE theme-eigen: eine Fehlermeldung
       muss in jeder Farbwelt rot bleiben. */
    --danger: #ff453a;
    --danger-text: #ff8a84;
    --danger-soft: rgba(255, 69, 58, 0.12);
    --danger-line: rgba(255, 69, 58, 0.34);

    --success: #32d74b;
    --success-text: #7ee2a0;
    --success-soft: rgba(50, 215, 75, 0.12);
    --success-line: rgba(50, 215, 75, 0.32);
    --success-wash: rgba(50, 215, 75, 0.06);

    --info: #4c9dff;
    --info-text: #7cc5ff;
    --info-soft: rgba(124, 197, 255, 0.16);

    /* Overlays & Chrome */
    --scrim: rgba(0, 0, 0, 0.65);
    --scrim-panel: rgba(11, 11, 12, 0.72);
    --scrim-panel-hover: rgba(11, 11, 12, 0.60);
    --chip-scrim: rgba(0, 0, 0, 0.65);
    --nav-bg: rgba(16, 16, 18, 0.85);
    /* Vordergrund auf einem dunklen Scrim über einem Foto — in beiden Modi weiß. */
    --on-scrim: #ffffff;
    --ring-track: rgba(255, 255, 255, 0.05);
    --focus-ring: rgba(255, 255, 255, 0.60);
    --knob: #ffffff;

    /* Toast bleibt in BEIDEN Modi dunkel (Plattformkonvention für
       Snackbars) — deshalb eine eigene Familie statt --surface. */
    --toast-bg: #1c1c20;
    --toast-fg: #f4f4f5;
    --toast-border: #2e2e34;

    /* Native Controls. Ein Data-URI-SVG ist ein isoliertes Dokument und
       erbt weder currentColor noch CSS-Variablen — die ganze url() muss
       daher selbst die Variable sein. */
    --icon-invert: 0.6;
    --select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    /* Elevation (soft, neutral — no colored glow) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* ---------- 3) Heller Modus ---------- */
[data-mode="light"] {
    color-scheme: light;

    --bg: #fbfbfc;
    --surface: #ffffff;
    --surface-2: #f4f4f6;
    --surface-3: #e8e8ec;

    --border: rgba(12, 12, 14, 0.09);
    --border-strong: rgba(12, 12, 14, 0.18);

    --text: #121214;
    --text-secondary: #55555c;
    --text-muted: #6c6c76;

    --danger: #c62d22;
    --danger-text: #a32219;
    --danger-soft: rgba(198, 45, 34, 0.09);
    --danger-line: rgba(198, 45, 34, 0.28);

    --success: #1a8a35;
    --success-text: #157a2e;
    --success-soft: rgba(26, 138, 53, 0.10);
    --success-line: rgba(26, 138, 53, 0.30);
    --success-wash: rgba(26, 138, 53, 0.06);

    --info: #1666d4;
    --info-text: #0f52ae;
    --info-soft: rgba(22, 102, 212, 0.10);

    --scrim: rgba(24, 24, 27, 0.45);
    --scrim-panel: rgba(251, 251, 252, 0.78);
    --scrim-panel-hover: rgba(251, 251, 252, 0.66);
    --chip-scrim: rgba(0, 0, 0, 0.55);
    --nav-bg: rgba(255, 255, 255, 0.88);
    --on-scrim: #ffffff;
    --ring-track: rgba(12, 12, 14, 0.10);
    --focus-ring: rgba(12, 12, 14, 0.55);
    --knob: #ffffff;

    /* Toast bleibt auch hier dunkel — siehe Block 2. */
    --toast-bg: #1f1f23;
    --toast-fg: #fafafa;
    --toast-border: #35353c;

    /* color-scheme: light rendert den Kalender-Indikator bereits dunkel. */
    --icon-invert: 0;
    --select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355555c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    /* Auf hellem Grund wirken die harten dunklen Schatten schmutzig. */
    --shadow-sm: 0 1px 2px rgba(12, 12, 14, 0.08);
    --shadow-md: 0 6px 20px rgba(12, 12, 14, 0.10);
    --shadow-lg: 0 16px 40px rgba(12, 12, 14, 0.14);
}

/* ---------- 4) Farbwelten — dunkel ----------
   Genau 13 Tokens. --accent ist FLÄCHE (trägt --on-accent),
   --accent-text ist derselbe Akzent als SCHRIFT auf --surface.
   Eine Farbe kann nicht beides sein, sobald es einen hellen Modus gibt. */

[data-theme="ember"] {
    /* Alpha bewusst .12 — identisch zum bisherigen Dark-Only-Zustand. */
    --accent: #ff453a;
    --accent-hover: #ff5c52;
    --accent-text: #ff6b61;
    --accent-soft: rgba(255, 69, 58, 0.12);
    --accent-line: rgba(255, 69, 58, 0.40);
    --accent-wash: rgba(255, 69, 58, 0.06);
    --on-accent: #ffffff;

    --gold: #d8b878;
    --gold-deep: #b8923f;
    --gold-text: #d8b878;
    --gold-soft: rgba(216, 184, 120, 0.12);
    --gold-line: rgba(216, 184, 120, 0.42);
    --on-gold: #2a2109;
}

[data-theme="arctic"] {
    --accent: #4c9dff;
    --accent-hover: #6bb0ff;
    --accent-text: #8ec4ff;
    --accent-soft: rgba(76, 157, 255, 0.14);
    --accent-line: rgba(76, 157, 255, 0.40);
    --accent-wash: rgba(76, 157, 255, 0.06);
    --on-accent: #06172b;

    --gold: #b9cbd9;
    --gold-deep: #7f9bad;
    --gold-text: #b9cbd9;
    --gold-soft: rgba(185, 203, 217, 0.14);
    --gold-line: rgba(185, 203, 217, 0.42);
    --on-gold: #0d1b24;
}

[data-theme="teal"] {
    --accent: #2dd4bf;
    --accent-hover: #5ee0d0;
    --accent-text: #5ee0d0;
    --accent-soft: rgba(45, 212, 191, 0.14);
    --accent-line: rgba(45, 212, 191, 0.40);
    --accent-wash: rgba(45, 212, 191, 0.06);
    --on-accent: #04231f;

    --gold: #d9b64f;
    --gold-deep: #a8862f;
    --gold-text: #d9b64f;
    --gold-soft: rgba(217, 182, 79, 0.14);
    --gold-line: rgba(217, 182, 79, 0.42);
    --on-gold: #241a04;
}

[data-theme="violet"] {
    --accent: #a78bfa;
    --accent-hover: #bda5ff;
    --accent-text: #bda5ff;
    --accent-soft: rgba(167, 139, 250, 0.14);
    --accent-line: rgba(167, 139, 250, 0.40);
    --accent-wash: rgba(167, 139, 250, 0.06);
    --on-accent: #1a0f38;

    --gold: #e8b4a0;
    --gold-deep: #c08670;
    --gold-text: #e8b4a0;
    --gold-soft: rgba(232, 180, 160, 0.14);
    --gold-line: rgba(232, 180, 160, 0.42);
    --on-gold: #2b120a;
}

[data-theme="mono"] {
    --accent: #e4e4e7;
    --accent-hover: #fafafa;
    --accent-text: #e4e4e7;
    --accent-soft: rgba(228, 228, 231, 0.12);
    --accent-line: rgba(228, 228, 231, 0.34);
    --accent-wash: rgba(228, 228, 231, 0.05);
    --on-accent: #131316;

    --gold: #c9c3b8;
    --gold-deep: #8e887d;
    --gold-text: #c9c3b8;
    --gold-soft: rgba(201, 195, 184, 0.14);
    --gold-line: rgba(201, 195, 184, 0.40);
    --on-gold: #171613;
}

/* ---------- 5) Farbwelten — hell ----------
   Spezifität (0,2,0), gewinnt daher immer über Block 4.
   Zwei Regeln gelten hier durchgängig:
   - --accent/--gold werden abgedunkelt, damit weiße Schrift darauf trägt.
     Insbesondere Gold: #d8b878 auf Weiß sind 1.8:1 — jedes Premium-Badge wäre
     unlesbar. Deshalb L*≈40 und --on-gold auf Weiß.
   - --accent-text/--gold-text sind noch dunkler: sie stehen als SCHRIFT auf
     --surface und brauchen dort 4.5:1. */

[data-mode="light"][data-theme="ember"] {
    --accent: #d92d20;
    --accent-hover: #b42318;
    --accent-text: #b42318;
    --accent-soft: rgba(217, 45, 32, 0.10);
    --accent-line: rgba(217, 45, 32, 0.35);
    --accent-wash: rgba(217, 45, 32, 0.04);
    --on-accent: #ffffff;

    --gold: #8a6d1f;
    --gold-deep: #6b5316;
    --gold-text: #6b5316;
    --gold-soft: rgba(138, 109, 31, 0.12);
    --gold-line: rgba(138, 109, 31, 0.35);
    --on-gold: #ffffff;
}

[data-mode="light"][data-theme="arctic"] {
    --accent: #1666d4;
    --accent-hover: #0f52ae;
    --accent-text: #0f52ae;
    --accent-soft: rgba(22, 102, 212, 0.10);
    --accent-line: rgba(22, 102, 212, 0.35);
    --accent-wash: rgba(22, 102, 212, 0.04);
    --on-accent: #ffffff;

    --gold: #45657a;
    --gold-deep: #2e4757;
    --gold-text: #2e4757;
    --gold-soft: rgba(69, 101, 122, 0.12);
    --gold-line: rgba(69, 101, 122, 0.35);
    --on-gold: #ffffff;
}

[data-mode="light"][data-theme="teal"] {
    --accent: #0d7d6f;
    --accent-hover: #0a655a;
    --accent-text: #0a655a;
    --accent-soft: rgba(13, 125, 111, 0.10);
    --accent-line: rgba(13, 125, 111, 0.35);
    --accent-wash: rgba(13, 125, 111, 0.04);
    --on-accent: #ffffff;

    --gold: #86651a;
    --gold-deep: #644b12;
    --gold-text: #644b12;
    --gold-soft: rgba(134, 101, 26, 0.12);
    --gold-line: rgba(134, 101, 26, 0.35);
    --on-gold: #ffffff;
}

[data-mode="light"][data-theme="violet"] {
    --accent: #6d28d9;
    --accent-hover: #5b21b6;
    --accent-text: #5b21b6;
    --accent-soft: rgba(109, 40, 217, 0.10);
    --accent-line: rgba(109, 40, 217, 0.35);
    --accent-wash: rgba(109, 40, 217, 0.04);
    --on-accent: #ffffff;

    --gold: #9a5540;
    --gold-deep: #7a4030;
    --gold-text: #7a4030;
    --gold-soft: rgba(154, 85, 64, 0.12);
    --gold-line: rgba(154, 85, 64, 0.35);
    --on-gold: #ffffff;
}

[data-mode="light"][data-theme="mono"] {
    --accent: #27272a;
    --accent-hover: #18181b;
    --accent-text: #27272a;
    --accent-soft: rgba(39, 39, 42, 0.08);
    --accent-line: rgba(39, 39, 42, 0.30);
    --accent-wash: rgba(39, 39, 42, 0.03);
    --on-accent: #ffffff;

    --gold: #57534e;
    --gold-deep: #44403c;
    --gold-text: #44403c;
    --gold-soft: rgba(87, 83, 78, 0.12);
    --gold-line: rgba(87, 83, 78, 0.32);
    --on-gold: #ffffff;
}

/* ---------- 6) Ausnahme: eingefrorenes Landing-Mockup ----------
   Das Mockup bleibt in beiden Modi dunkel, soll aber die gewählte Farbwelt
   zeigen. Im Hellmodus bekäme es sonst die ABGEDUNKELTEN Chroma-Werte auf
   dunklem Grund — dunkles Gold mit dunkler Schrift ist unlesbar. Deshalb hier
   die Dunkel-Chroma zurückholen. Nur die Tokens, die das Mockup benutzt. */
[data-mode="light"][data-theme="ember"] .hm-phone {
    --accent: #ff453a; --gold: #d8b878; --on-gold: #2a2109;
}
[data-mode="light"][data-theme="arctic"] .hm-phone {
    --accent: #4c9dff; --gold: #b9cbd9; --on-gold: #0d1b24;
}
[data-mode="light"][data-theme="teal"] .hm-phone {
    --accent: #2dd4bf; --gold: #d9b64f; --on-gold: #241a04;
}
[data-mode="light"][data-theme="violet"] .hm-phone {
    --accent: #a78bfa; --gold: #e8b4a0; --on-gold: #2b120a;
}
[data-mode="light"][data-theme="mono"] .hm-phone {
    --accent: #e4e4e7; --gold: #c9c3b8; --on-gold: #171613;
}