/**
 * Command Center – Design-Tokens (Konzept §4)
 *
 * Zwei Themen (Eisenkodex, Durchgang 8): Dunkel = Schmiedeeisen, Hell = Kartentisch-Pergament.
 * Auswahl: `data-theme="dark" | "light"` auf <html>; ohne Attribut folgt die
 * Seite dem System (`prefers-color-scheme`).
 *
 * Kontrastregel (geprüft in tests/design-system.test.ts):
 * alle Text-Tokens (--text-*, --area-<bereich>, --color-<status>) haben
 * mindestens 4,5:1 auf --bg-base, --bg-surface und --bg-elevated.
 *
 * Die Werte des Hell-Themas stehen zweimal (expliziter Schalter + System-
 * Automatik). Der Test prüft, dass beide Blöcke identisch sind und mit
 * src/styles/tokens.ts übereinstimmen.
 */

:root {
  /* Radien – nach Hierarchie gestuft, nicht überall gleich */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --radius-card: var(--radius-lg);
  --radius-btn: var(--radius-md);
  --radius-sheet: var(--radius-xl);

  /* Abstände (4er-Raster) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Tippflächen (Konzept §7.4: ≥ 44 px) */
  --touch-target-min: 44px;

  /* Ebenen */
  --z-sticky: 20;
  --z-nav: 40;
  --z-fab: 45;
  --z-sheet: 50;
  --z-toast: 60;
}

/* ──────────────────────────────────────────────────────────────────────────
   Dunkel-Thema (Standard) – tiefes Graphit
   ────────────────────────────────────────────────────────────────────────── */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  --bg-base: #0e1210;
  --bg-surface: #141a17;
  --bg-elevated: #1c2420;
  --bg-card: #141a17;
  --bg-card-hover: #19201c;
  --bg-glass: rgba(20, 26, 23, 0.86);
  --bg-backdrop: rgba(6, 8, 7, 0.76);

  --border: rgba(236, 230, 214, 0.1);
  --border-subtle: rgba(236, 230, 214, 0.055);
  --border-strong: rgba(236, 230, 214, 0.2);
  --border-interactive: rgba(209, 168, 82, 0.45);

  --text-primary: #ece6d6;
  --text-secondary: #b3b5a6;
  --text-muted: #979d8f;
  --text-inverse: #0e1210;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.45), 0 2px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 12px 36px -4px rgba(0, 0, 0, 0.6), 0 4px 12px -2px rgba(0, 0, 0, 0.4);

  /* Status – einheitlich für Erfolg, Warnung, Fehler, Hinweis */
  --color-success: #57d68d;
  --color-success-bg: rgba(87, 214, 141, 0.12);
  --color-success-border: rgba(87, 214, 141, 0.28);
  --color-warning: #e8a93c;
  --color-warning-bg: rgba(232, 169, 60, 0.12);
  --color-warning-border: rgba(232, 169, 60, 0.28);
  --color-danger: #f07050;
  --color-danger-bg: rgba(240, 112, 80, 0.12);
  --color-danger-border: rgba(240, 112, 80, 0.28);
  --color-info: #8db7c8;
  --color-info-bg: rgba(141, 183, 200, 0.12);
  --color-info-border: rgba(141, 183, 200, 0.28);

  /* Bereichsfarben: Heute Bernstein · Haushalt Grün · Finanzen Blau ·
     Invest Violett · Agenda Cyan/Türkis */
  --area-heute: #d1a852;
  --area-heute-bg: rgba(209, 168, 82, 0.13);
  --area-heute-border: rgba(209, 168, 82, 0.3);
  --area-haushalt: #6fc196;
  --area-haushalt-bg: rgba(111, 193, 150, 0.13);
  --area-haushalt-border: rgba(111, 193, 150, 0.3);
  --area-finanzen: #82acd0;
  --area-finanzen-bg: rgba(130, 172, 208, 0.13);
  --area-finanzen-border: rgba(130, 172, 208, 0.3);
  --area-invest: #a596de;
  --area-invest-bg: rgba(165, 150, 222, 0.13);
  --area-invest-border: rgba(165, 150, 222, 0.3);
  --area-agenda: #52ccd0;
  --area-agenda-bg: rgba(82, 204, 208, 0.13);
  --area-agenda-border: rgba(82, 204, 208, 0.3);
  --area-zeitung: #db8a5e;
  --area-zeitung-bg: rgba(219, 138, 94, 0.13);
  --area-zeitung-border: rgba(219, 138, 94, 0.3);
  --area-vikki: #d093be;
  --area-vikki-bg: rgba(208, 147, 190, 0.13);
  --area-vikki-border: rgba(208, 147, 190, 0.3);
  --area-eye: #b6c96a;
  --area-eye-bg: rgba(182, 201, 106, 0.13);
  --area-eye-border: rgba(182, 201, 106, 0.3);
  --area-druck: #e3787f;
  --area-druck-bg: rgba(227, 120, 127, 0.13);
  --area-druck-border: rgba(227, 120, 127, 0.3);

  /* Bereichs-Verlauf für Kopfbereiche / Hero-Flächen (dezent) */
  --area-wash-strength: 16%;

  /* Diagramme */
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-axis: rgba(255, 255, 255, 0.15);
  --chart-text: #979d8f;
  --chart-track: rgba(255, 255, 255, 0.08);

  /* Rückwärtskompatible Akzente (Bestandsseiten, Navigation A-002) */
  --accent-primary: var(--area-heute);
  --accent-warm: #e8a93c;
  --accent-soft: #e8c27a;
  --accent-green: var(--area-haushalt);
  --accent-teal: var(--area-agenda);
  --accent-purple: var(--area-invest);
  --accent-rose: var(--color-danger);
  --accent-blue: var(--area-finanzen);

  --focus-color: #d1a852;
}

/* ──────────────────────────────────────────────────────────────────────────
   Hell-Thema – helles Warmweiß (expliziter Schalter)
   ────────────────────────────────────────────────────────────────────────── */
[data-theme='light'] {
  color-scheme: light;

  --bg-base: #f8f5ec;
  --bg-surface: #fdfbf6;
  --bg-elevated: #ece6d6;
  --bg-card: #fdfbf6;
  --bg-card-hover: #f5f0e4;
  --bg-glass: rgba(253, 251, 246, 0.9);
  --bg-backdrop: rgba(29, 33, 28, 0.42);

  --border: rgba(29, 33, 28, 0.13);
  --border-subtle: rgba(29, 33, 28, 0.07);
  --border-strong: rgba(29, 33, 28, 0.24);
  --border-interactive: rgba(122, 89, 22, 0.5);

  --text-primary: #1d211c;
  --text-secondary: #4a4e45;
  --text-muted: #5b6056;
  --text-inverse: #fdfbf6;

  --shadow-sm: 0 1px 2px rgba(40, 32, 24, 0.06);
  --shadow-card: 0 4px 20px -2px rgba(40, 32, 24, 0.08), 0 2px 6px -1px rgba(40, 32, 24, 0.05);
  --shadow-elevated: 0 12px 36px -4px rgba(40, 32, 24, 0.16), 0 4px 12px -2px rgba(40, 32, 24, 0.08);

  --color-success: #1d6a42;
  --color-success-bg: rgba(29, 106, 66, 0.1);
  --color-success-border: rgba(29, 106, 66, 0.28);
  --color-warning: #8f5208;
  --color-warning-bg: rgba(143, 82, 8, 0.1);
  --color-warning-border: rgba(143, 82, 8, 0.28);
  --color-danger: #ab3417;
  --color-danger-bg: rgba(171, 52, 23, 0.1);
  --color-danger-border: rgba(171, 52, 23, 0.28);
  --color-info: #2a5d76;
  --color-info-bg: rgba(42, 93, 118, 0.1);
  --color-info-border: rgba(42, 93, 118, 0.28);

  --area-heute: #7a5916;
  --area-heute-bg: rgba(122, 89, 22, 0.1);
  --area-heute-border: rgba(122, 89, 22, 0.28);
  --area-haushalt: #256848;
  --area-haushalt-bg: rgba(37, 104, 72, 0.1);
  --area-haushalt-border: rgba(37, 104, 72, 0.28);
  --area-finanzen: #2f5f8a;
  --area-finanzen-bg: rgba(47, 95, 138, 0.1);
  --area-finanzen-border: rgba(47, 95, 138, 0.28);
  --area-invest: #55458f;
  --area-invest-bg: rgba(85, 69, 143, 0.1);
  --area-invest-border: rgba(85, 69, 143, 0.28);
  --area-agenda: #1f6e72;
  --area-agenda-bg: rgba(31, 110, 114, 0.1);
  --area-agenda-border: rgba(31, 110, 114, 0.28);
  --area-zeitung: #93451f;
  --area-zeitung-bg: rgba(147, 69, 31, 0.1);
  --area-zeitung-border: rgba(147, 69, 31, 0.28);
  --area-vikki: #86386a;
  --area-vikki-bg: rgba(134, 56, 106, 0.1);
  --area-vikki-border: rgba(134, 56, 106, 0.28);
  --area-eye: #556417;
  --area-eye-bg: rgba(85, 100, 23, 0.1);
  --area-eye-border: rgba(85, 100, 23, 0.28);
  --area-druck: #a33a45;
  --area-druck-bg: rgba(163, 58, 69, 0.1);
  --area-druck-border: rgba(163, 58, 69, 0.28);

  --area-wash-strength: 12%;

  --chart-grid: rgba(28, 25, 23, 0.08);
  --chart-axis: rgba(28, 25, 23, 0.16);
  --chart-text: #5b6056;
  --chart-track: rgba(28, 25, 23, 0.08);

  --accent-primary: var(--area-heute);
  --accent-warm: #8f5208;
  --accent-soft: #b07a1c;
  --accent-green: var(--area-haushalt);
  --accent-teal: var(--area-agenda);
  --accent-purple: var(--area-invest);
  --accent-rose: var(--color-danger);
  --accent-blue: var(--area-finanzen);

  --focus-color: #7a5916;
}

/* ──────────────────────────────────────────────────────────────────────────
   Hell-Thema – System-Automatik (kein data-theme gesetzt)
   Muss identisch zum Block [data-theme='light'] bleiben (Test).
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --bg-base: #f8f5ec;
    --bg-surface: #fdfbf6;
    --bg-elevated: #ece6d6;
    --bg-card: #fdfbf6;
    --bg-card-hover: #f5f0e4;
    --bg-glass: rgba(253, 251, 246, 0.9);
    --bg-backdrop: rgba(29, 33, 28, 0.42);

    --border: rgba(29, 33, 28, 0.13);
    --border-subtle: rgba(29, 33, 28, 0.07);
    --border-strong: rgba(29, 33, 28, 0.24);
    --border-interactive: rgba(122, 89, 22, 0.5);

    --text-primary: #1d211c;
    --text-secondary: #4a4e45;
    --text-muted: #5b6056;
    --text-inverse: #fdfbf6;

    --shadow-sm: 0 1px 2px rgba(40, 32, 24, 0.06);
    --shadow-card: 0 4px 20px -2px rgba(40, 32, 24, 0.08), 0 2px 6px -1px rgba(40, 32, 24, 0.05);
    --shadow-elevated: 0 12px 36px -4px rgba(40, 32, 24, 0.16), 0 4px 12px -2px rgba(40, 32, 24, 0.08);

    --color-success: #1d6a42;
    --color-success-bg: rgba(29, 106, 66, 0.1);
    --color-success-border: rgba(29, 106, 66, 0.28);
    --color-warning: #8f5208;
    --color-warning-bg: rgba(143, 82, 8, 0.1);
    --color-warning-border: rgba(143, 82, 8, 0.28);
    --color-danger: #ab3417;
    --color-danger-bg: rgba(171, 52, 23, 0.1);
    --color-danger-border: rgba(171, 52, 23, 0.28);
    --color-info: #2a5d76;
    --color-info-bg: rgba(42, 93, 118, 0.1);
    --color-info-border: rgba(42, 93, 118, 0.28);

    --area-heute: #7a5916;
    --area-heute-bg: rgba(122, 89, 22, 0.1);
    --area-heute-border: rgba(122, 89, 22, 0.28);
    --area-haushalt: #256848;
    --area-haushalt-bg: rgba(37, 104, 72, 0.1);
    --area-haushalt-border: rgba(37, 104, 72, 0.28);
    --area-finanzen: #2f5f8a;
    --area-finanzen-bg: rgba(47, 95, 138, 0.1);
    --area-finanzen-border: rgba(47, 95, 138, 0.28);
    --area-invest: #55458f;
    --area-invest-bg: rgba(85, 69, 143, 0.1);
    --area-invest-border: rgba(85, 69, 143, 0.28);
    --area-agenda: #1f6e72;
    --area-agenda-bg: rgba(31, 110, 114, 0.1);
    --area-agenda-border: rgba(31, 110, 114, 0.28);
    --area-zeitung: #93451f;
    --area-zeitung-bg: rgba(147, 69, 31, 0.1);
    --area-zeitung-border: rgba(147, 69, 31, 0.28);
    --area-vikki: #86386a;
    --area-vikki-bg: rgba(134, 56, 106, 0.1);
    --area-vikki-border: rgba(134, 56, 106, 0.28);
    --area-eye: #556417;
    --area-eye-bg: rgba(85, 100, 23, 0.1);
    --area-eye-border: rgba(85, 100, 23, 0.28);
    --area-druck: #a33a45;
    --area-druck-bg: rgba(163, 58, 69, 0.1);
    --area-druck-border: rgba(163, 58, 69, 0.28);

    --area-wash-strength: 12%;

    --chart-grid: rgba(28, 25, 23, 0.08);
    --chart-axis: rgba(28, 25, 23, 0.16);
    --chart-text: #5b6056;
    --chart-track: rgba(28, 25, 23, 0.08);

    --accent-primary: var(--area-heute);
    --accent-warm: #8f5208;
    --accent-soft: #b07a1c;
    --accent-green: var(--area-haushalt);
    --accent-teal: var(--area-agenda);
    --accent-purple: var(--area-invest);
    --accent-rose: var(--color-danger);
    --accent-blue: var(--area-finanzen);

    --focus-color: #7a5916;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Bereichs-Zuordnung
   Jeder Container mit data-area="…" stellt --area-accent(-bg/-border) bereit;
   Karten, Knöpfe, Ringe, Tabs und Diagramme darin färben sich automatisch.
   ────────────────────────────────────────────────────────────────────────── */
[data-area='heute'] {
  --area-accent: var(--area-heute);
  --area-accent-bg: var(--area-heute-bg);
  --area-accent-border: var(--area-heute-border);
  --cc-area-accent: var(--area-heute);
}

[data-area='haushalt'] {
  --area-accent: var(--area-haushalt);
  --area-accent-bg: var(--area-haushalt-bg);
  --area-accent-border: var(--area-haushalt-border);
  --cc-area-accent: var(--area-haushalt);
}

[data-area='finanzen'] {
  --area-accent: var(--area-finanzen);
  --area-accent-bg: var(--area-finanzen-bg);
  --area-accent-border: var(--area-finanzen-border);
  --cc-area-accent: var(--area-finanzen);
}

[data-area='invest'] {
  --area-accent: var(--area-invest);
  --area-accent-bg: var(--area-invest-bg);
  --area-accent-border: var(--area-invest-border);
  --cc-area-accent: var(--area-invest);
}

[data-area='agenda'] {
  --area-accent: var(--area-agenda);
  --area-accent-bg: var(--area-agenda-bg);
  --area-accent-border: var(--area-agenda-border);
  --cc-area-accent: var(--area-agenda);
}

[data-area='zeitung'] {
  --area-accent: var(--area-zeitung);
  --area-accent-bg: var(--area-zeitung-bg);
  --area-accent-border: var(--area-zeitung-border);
  --cc-area-accent: var(--area-zeitung);
}

[data-area='vikki'] {
  --area-accent: var(--area-vikki);
  --area-accent-bg: var(--area-vikki-bg);
  --area-accent-border: var(--area-vikki-border);
  --cc-area-accent: var(--area-vikki);
}

[data-area='druck'] {
  --area-accent: var(--area-druck);
  --area-accent-bg: var(--area-druck-bg);
  --area-accent-border: var(--area-druck-border);
  --cc-area-accent: var(--area-druck);
}

[data-area='eye'] {
  --area-accent: var(--area-eye);
  --area-accent-bg: var(--area-eye-bg);
  --area-accent-border: var(--area-eye-border);
  --cc-area-accent: var(--area-eye);
}

/* ──────────────────────────────────────────────────────────────────────────
   Flächen-Hilfsklassen
   ────────────────────────────────────────────────────────────────────────── */

/* Dezenter Bereichsverlauf für Kopfbereiche einer Seite */
.cc-area-wash {
  background-image:
    radial-gradient(
      120% 80% at 0% 0%,
      color-mix(in srgb, var(--area-accent, var(--accent-primary)) var(--area-wash-strength), transparent) 0%,
      transparent 60%
    );
}

/* Glasfläche (schwebende Leisten, Blatt-Kopf, FAB-Umgebung) */
.cc-glass {
  background-color: var(--bg-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cc-glass {
    background-color: var(--bg-surface);
  }
}

/* Sichtbarer Tastaturfokus überall (WCAG 2.4.7) */
@layer base {
  :focus-visible {
    outline: 2px solid var(--area-accent, var(--focus-color));
    outline-offset: 2px;
  }
}