/* ==========================================================================
   CITA THEME TOKENS
   Semantic Abstraktionsschicht für Dark/Light Mode.
   Referenziert die Raw-Palette aus citastyle.css (:root --cita-*).
   ========================================================================== */

/* Dark Mode (default + explizit) */
:root[data-theme="dark"],
:root:not([data-theme]) {
  /* CRYPTON TARGETS (activated via crypton-overrides.css per-page):
     bg-page: #050D1D; bg-surface: rgba(10,31,58,0.5); bg-elevated: #0E2542;
     text-primary: #E5F0FF; text-secondary: #E4E4E4; text-muted: #B1BBD4; text-heading: #FFFFFF;
     border-default: #3E526C; accent-cyan: #019DEA; input-bg: rgba(10,31,58,0.5);
     Full list in crypton-overrides.css */
  --cita-bg-page: var(--cita-charcoal-900);
  --cita-bg-surface: rgba(30, 41, 59, 0.4);
  --cita-bg-elevated: rgba(30, 41, 59, 0.6);
  --cita-bg-overlay: rgba(15, 23, 42, 0.85);

  --cita-text-primary: #f1f5f9;
  --cita-text-secondary: var(--cita-charcoal-400);
  --cita-text-muted: #8091a7;

  --cita-border-subtle: rgba(255, 255, 255, 0.08);
  --cita-border-default: rgba(255, 255, 255, 0.12);
  --cita-border-strong: rgba(255, 255, 255, 0.18);

  --cita-glass-bg: rgba(15, 23, 42, 0.85);
  --cita-glass-border: rgba(255, 255, 255, 0.08);

  /* Phase 2 */
  --cita-bg-inset: rgba(2, 6, 23, 0.6);
  --cita-bg-hover: rgba(51, 65, 85, 0.4);
  --cita-text-heading: #f8fafc;
  --cita-interactive-bg: rgba(255, 255, 255, 0.05);
  --cita-interactive-bg-hover: rgba(255, 255, 255, 0.1);
  --cita-interactive-border: rgba(255, 255, 255, 0.08);
  --cita-bg-tooltip: rgba(15, 23, 42, 0.98);

  /* Phase 3A — Form Inputs */
  --cita-input-bg: #1e293b;
  --cita-input-text: #e2e8f0;
  --cita-input-placeholder: #8b9cb3;
  --cita-checkbox-bg: #1e293b;

  /* Phase 3A — Cookie Banner */
  --cita-cookie-sheet-bg: linear-gradient(145deg, rgba(9,14,26,.96), rgba(10,16,28,.98));
  --cita-cookie-option-bg: rgba(15, 23, 42, .35);
  --cita-cookie-option-border: rgba(71, 85, 105, .28);
  --cita-cookie-toggle-bg: var(--cita-charcoal-900);
  --cita-cookie-toggle-track: linear-gradient(180deg, rgba(15,23,42,.9), rgba(17,24,39,.9));
  --cita-cookie-actions-bg: linear-gradient(180deg, rgba(10,16,28,0.94) 70%, rgba(10,16,28,0.98) 100%);
  --cita-cookie-btn-secondary-bg: var(--cita-charcoal-900);
  --cita-cookie-btn-outline-hover: rgba(51, 65, 85, .35);
  --cita-cookie-backdrop: rgba(2, 6, 23, .55);

  /* Phase 3D — Component Tokens */
  --cita-comp-glass-from: rgba(15, 23, 42, 0.4);
  --cita-comp-glass-via: rgba(2, 6, 23, 0.6);
  --cita-comp-glass-to: rgba(2, 6, 23, 0.8);
  --cita-comp-border: rgba(51, 65, 85, 0.4);
  --cita-comp-border-hover: rgba(71, 85, 105, 0.6);
  --cita-comp-text: #e2e8f0;
  --cita-comp-text-muted: #94a3b8;
  --cita-comp-text-heading: #f8fafc;
  --cita-comp-bg-card: rgba(15, 23, 42, 0.3);
  --cita-comp-bg-dropdown: rgba(15, 23, 42, 0.95);
  --cita-comp-divider: rgba(51, 65, 85, 0.6);
  --cita-comp-skeleton-bg: rgba(2, 6, 23, 0.7);
  --cita-comp-skeleton-border: rgba(30, 41, 59, 0.6);
  --cita-comp-kpi-fade: rgba(15, 23, 42, 0.2);

  /* Phase 4 — Accent Colors
     CRYPTON TARGET: --cita-accent-cyan: #019DEA; subtle: rgba(1,157,234,0.15); muted: rgba(1,157,234,0.08); */
  --cita-accent-cyan: rgb(34, 211, 238);
  --cita-accent-cyan-subtle: rgba(34, 211, 238, 0.15);
  --cita-accent-cyan-muted: rgba(34, 211, 238, 0.08);
  --cita-accent-blue: rgb(96, 165, 250);
  --cita-accent-blue-subtle: rgba(59, 130, 246, 0.15);
  --cita-accent-green: rgb(52, 211, 153);
  --cita-accent-green-subtle: rgba(52, 211, 153, 0.15);
  --cita-accent-red: rgb(248, 113, 113);
  --cita-accent-red-subtle: rgba(239, 68, 68, 0.15);
  --cita-accent-purple: rgb(167, 139, 250);
  --cita-accent-purple-subtle: rgba(139, 92, 246, 0.15);
  --cita-accent-amber: rgb(251, 191, 36);
  --cita-accent-amber-subtle: rgba(251, 191, 36, 0.15);
  --cita-accent-teal: #14B8A6;
  --cita-accent-teal-subtle: rgba(20, 184, 166, 0.15);
  /* OLD: --cita-accent-cyan-light: #67e8f9; */
  /* CRYPTON TARGET: #09a2ef */
  --cita-accent-cyan-light: #67e8f9;
}

/* Light Mode */
:root[data-theme="light"] {
  --cita-bg-page: #ffffff;
  --cita-bg-surface: rgba(241, 245, 249, 0.8);
  --cita-bg-elevated: #ffffff;
  --cita-bg-overlay: rgba(255, 255, 255, 0.95);

  --cita-text-primary: #0f172a;
  --cita-text-secondary: #475569;
  --cita-text-muted: #64748b;

  --cita-border-subtle: rgba(0, 0, 0, 0.06);
  --cita-border-default: rgba(0, 0, 0, 0.1);
  --cita-border-strong: rgba(0, 0, 0, 0.15);

  --cita-glass-bg: rgba(255, 255, 255, 0.85);
  --cita-glass-border: rgba(0, 0, 0, 0.08);

  /* Phase 2 */
  --cita-bg-inset: rgba(241, 245, 249, 0.6);
  --cita-bg-hover: rgba(0, 0, 0, 0.04);
  --cita-text-heading: #0f172a;
  --cita-interactive-bg: rgba(0, 0, 0, 0.04);
  --cita-interactive-bg-hover: rgba(0, 0, 0, 0.08);
  --cita-interactive-border: rgba(0, 0, 0, 0.1);
  --cita-bg-tooltip: rgba(255, 255, 255, 0.98);

  /* Phase 3A — Form Inputs */
  --cita-input-bg: #ffffff;
  --cita-input-text: #0f172a;
  --cita-input-placeholder: #64748b;
  --cita-checkbox-bg: #ffffff;

  /* Phase 3A — Cookie Banner */
  --cita-cookie-sheet-bg: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.99));
  --cita-cookie-option-bg: rgba(241, 245, 249, .6);
  --cita-cookie-option-border: rgba(0, 0, 0, .1);
  --cita-cookie-toggle-bg: #f1f5f9;
  --cita-cookie-toggle-track: linear-gradient(180deg, rgba(241,245,249,.9), rgba(226,232,240,.9));
  --cita-cookie-actions-bg: linear-gradient(180deg, rgba(255,255,255,0.94) 70%, rgba(248,250,252,0.98) 100%);
  --cita-cookie-btn-secondary-bg: #f1f5f9;
  --cita-cookie-btn-outline-hover: rgba(0, 0, 0, .06);
  --cita-cookie-backdrop: rgba(0, 0, 0, .3);

  /* Phase 3D — Component Tokens */
  --cita-comp-glass-from: rgba(255, 255, 255, 0.8);
  --cita-comp-glass-via: rgba(248, 250, 252, 0.9);
  --cita-comp-glass-to: rgba(241, 245, 249, 0.95);
  --cita-comp-border: rgba(0, 0, 0, 0.08);
  --cita-comp-border-hover: rgba(0, 0, 0, 0.15);
  --cita-comp-text: #1e293b;
  --cita-comp-text-muted: #475569;
  --cita-comp-text-heading: #0f172a;
  --cita-comp-bg-card: rgba(255, 255, 255, 0.6);
  --cita-comp-bg-dropdown: rgba(255, 255, 255, 0.98);
  --cita-comp-divider: rgba(0, 0, 0, 0.1);
  --cita-comp-skeleton-bg: rgba(241, 245, 249, 0.8);
  --cita-comp-skeleton-border: rgba(0, 0, 0, 0.08);
  --cita-comp-kpi-fade: rgba(241, 245, 249, 0.3);

  /* Phase 4 — Accent Colors */
  --cita-accent-cyan: rgb(6, 182, 212);
  --cita-accent-cyan-subtle: rgba(6, 182, 212, 0.1);
  --cita-accent-cyan-muted: rgba(6, 182, 212, 0.05);
  --cita-accent-blue: rgb(37, 99, 235);
  --cita-accent-blue-subtle: rgba(37, 99, 235, 0.1);
  --cita-accent-green: rgb(22, 163, 74);
  --cita-accent-green-subtle: rgba(22, 163, 74, 0.1);
  --cita-accent-red: rgb(220, 38, 38);
  --cita-accent-red-subtle: rgba(220, 38, 38, 0.08);
  --cita-accent-purple: rgb(124, 58, 237);
  --cita-accent-purple-subtle: rgba(124, 58, 237, 0.1);
  --cita-accent-amber: rgb(217, 119, 6);
  --cita-accent-amber-subtle: rgba(217, 119, 6, 0.1);
  --cita-accent-teal: #0D9488;
  --cita-accent-teal-subtle: rgba(13, 148, 136, 0.1);
  --cita-accent-cyan-light: #0891b2;
}