/* ═══════════════════════════════════════════════════════════════
   VIVEREA — Design Tokens (Dual Theme: Dark + Light)
   data-theme="dark" (default) | data-theme="light"
   8‑px baseline · WCAG AA · de‑CH formatting
   ═══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DEFAULT = DARK THEME
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root,
[data-theme="dark"] {
  /* ── Core Surfaces ── */
  --bg-0: #050507;
  --bg-1: #0a0a0d;
  --bg-2: #111114;

  /* ── Text ── */
  --on-bg: rgba(255,255,255,0.92);
  --on-bg-dim: rgba(255,255,255,0.56);
  --on-bg-muted: rgba(255,255,255,0.32);

  /* ── Borders / Separators ── */
  --separator: rgba(255,255,255,0.10);
  --separator-subtle: rgba(255,255,255,0.05);

  /* ── Accents ── */
  --accent: #FFFFFF;
  --accent-hover: #D4D4D8;
  --accent-dim: rgba(255,255,255,0.07);
  --accent-text: rgba(255,255,255,0.92);

  /* ── Status ── */
  --success: #30D158;
  --success-dim: rgba(48,209,88,0.10);
  --warning: #FF9F0A;
  --warning-dim: rgba(255,159,10,0.10);
  --danger: #FF453A;
  --danger-dim: rgba(255,69,58,0.10);
  --danger-hover: #E0342A;
  --indigo: #818CF8;
  --indigo-dim: rgba(99,102,241,0.08);
  --gold: #FFD60A;
  --gold-dim: rgba(255,214,10,0.10);

  /* ── Component Tokens (Dark) ── */
  --header-bg: rgba(5,5,7,0.82);
  --header-border: var(--separator-subtle);
  --nav-active-border: var(--on-bg);
  --input-bg: rgba(255,255,255,0.03);
  --input-border: var(--separator-subtle);
  --input-focus-border: rgba(255,255,255,0.3);
  --input-focus-ring: 0 0 0 3px rgba(255,255,255,0.06);
  --input-focus-bg: rgba(255,255,255,0.05);
  --placeholder: rgba(255,255,255,0.28);
  --hover-bg: rgba(255,255,255,0.05);
  --hover-bg-strong: rgba(255,255,255,0.08);
  --btn-primary-bg: #FFFFFF;
  --btn-primary-color: #050507;
  --btn-primary-hover-bg: #E8E8EC;
  --btn-primary-active-bg: #D4D4D8;
  --btn-primary-border: rgba(255,255,255,0.2);
  --btn-primary-shadow: 0 1px 4px rgba(255,255,255,0.06);
  --btn-primary-hover-shadow: 0 4px 16px rgba(255,255,255,0.08);
  --btn-secondary-bg: rgba(255,255,255,0.04);
  --btn-secondary-hover-bg: rgba(255,255,255,0.08);
  --btn-secondary-border: var(--separator);
  --btn-secondary-hover-border: rgba(255,255,255,0.16);
  --focus-ring: rgba(255,255,255,0.5);
  --selection-bg: rgba(255,255,255,0.2);
  --kpi-bg: rgba(255,255,255,0.02);
  --kpi-hover-border: rgba(255,255,255,0.14);
  --segment-bg: rgba(255,255,255,0.03);
  --segment-active-bg: rgba(255,255,255,0.08);
  --segment-active-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  --card-hover-border: rgba(255,255,255,0.10);
  --chip-border: rgba(255,255,255,0.10);
  --empty-bg: rgba(255,255,255,0.015);
  --empty-icon-bg: rgba(255,255,255,0.03);
  --empty-btn-bg: rgba(255,255,255,0.04);
  --empty-btn-hover-bg: rgba(255,255,255,0.08);
  --empty-btn-hover-border: rgba(255,255,255,0.16);
  --toast-bg: rgba(10,10,13,0.92);
  --modal-overlay: rgba(0,0,0,0.8);
  --glass-start: rgba(255,255,255,0.04);
  --glass-end: rgba(255,255,255,0.015);
  --glass-border: rgba(255,255,255,0.06);
  --scrollbar-thumb: rgba(255,255,255,0.08);
  --scrollbar-hover: rgba(255,255,255,0.14);
  --table-header-bg: rgba(255,255,255,0.02);
  --table-row-hover: rgba(255,255,255,0.025);
  --table-border: var(--separator-subtle);
  --badge-muted-bg: rgba(255,255,255,0.06);
  --badge-muted-color: var(--on-bg-dim);

  /* ── Radii ── */
  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --r-pill: 9999px;

  /* ── Blur ── */
  --blur-s: 10px;
  --blur-m: 20px;
  --blur-l: 32px;

  /* ── Shadows / Glow ── */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
  --shadow-2: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-3: 0 24px 48px rgba(0,0,0,0.7);
  --shadow-card: var(--shadow-1);
  --shadow-card-hover: var(--shadow-2);
  --shadow-modal: var(--shadow-3);
  --glow-acc: 0 0 0 1px rgba(255,255,255,0.18), 0 0 20px rgba(255,255,255,0.04);

  /* ── Typography ── */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 14px;
  --lh-body: 1.55;
  --lh-heading: 1.15;

  /* ── Transitions ── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.12s;
  --dur: 0.18s;
  --dur-slow: 0.3s;

  /* ── Spacing (8‑px grid) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Theme icon (used by the toggle) ── */
  color-scheme: dark;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHT THEME — Professional Real‑Estate Dashboard
   Clear borders · Strong contrast · Crisp white surfaces
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-theme="light"] {
  /* ── Core Surfaces (Canvas leicht grau; Karten/Flächen: --bg-1 weiß) ── */
  --bg-0: #f8f9fb;
  --bg-1: #FFFFFF;
  --bg-2: #f1f3f7;

  /* ── Text — strong contrast ── */
  --on-bg: #0B1220;
  --on-bg-dim: #6B7280;
  --on-bg-muted: #9CA3AF;

  /* ── Borders / Separators — clearly visible ── */
  --separator: rgba(0,0,0,0.08);
  --separator-subtle: rgba(0,0,0,0.06);

  /* ── Accents — Immobilien-Blau ── */
  --accent: #2563EB;
  --accent-hover: #1E4ED8;
  --accent-dim: #EFF6FF;
  --accent-text: #2563EB;

  /* ── Status ── */
  --success: #16A34A;
  --success-dim: rgba(22,163,74,0.10);
  --warning: #D97706;
  --warning-dim: rgba(217,119,6,0.10);
  --danger: #DC2626;
  --danger-dim: rgba(220,38,38,0.08);
  --danger-hover: #B91C1C;
  --indigo: #6366F1;
  --indigo-dim: rgba(99,102,241,0.08);
  --gold: #CA8A04;
  --gold-dim: rgba(202,138,4,0.08);

  /* ── Component Tokens ── */
  --header-bg: #FFFFFF;
  --header-border: rgba(0,0,0,0.10);
  --nav-active-border: #2563EB;
  --input-bg: #FFFFFF;
  --input-border: rgba(0,0,0,0.12);
  --input-focus-border: #2563EB;
  --input-focus-ring: 0 0 0 3px rgba(37,99,235,0.20);
  --input-focus-bg: #FFFFFF;
  --placeholder: #9CA3AF;
  --hover-bg: #F9FAFB;
  --hover-bg-strong: #F1F3F5;

  /* Buttons */
  --btn-primary-bg: #2563EB;
  --btn-primary-color: #FFFFFF;
  --btn-primary-hover-bg: #1E4ED8;
  --btn-primary-active-bg: #1E40AF;
  --btn-primary-border: transparent;
  --btn-primary-shadow: 0 2px 8px rgba(37,99,235,0.24);
  --btn-primary-hover-shadow: 0 4px 14px rgba(37,99,235,0.30);
  --btn-secondary-bg: #F1F3F5;
  --btn-secondary-hover-bg: #E5E7EB;
  --btn-secondary-border: rgba(0,0,0,0.08);
  --btn-secondary-hover-border: rgba(0,0,0,0.12);

  /* Focus / Selection */
  --focus-ring: rgba(37,99,235,0.45);
  --selection-bg: rgba(37,99,235,0.12);

  /* KPI / Stats */
  --kpi-bg: #FFFFFF;
  --kpi-hover-border: rgba(37,99,235,0.30);

  /* Segments */
  --segment-bg: #F1F3F5;
  --segment-active-bg: #FFFFFF;
  --segment-active-shadow: 0 1px 3px rgba(0,0,0,0.10);

  /* Cards */
  --card-hover-border: rgba(0,0,0,0.12);
  --chip-border: rgba(0,0,0,0.10);

  /* Empty states */
  --empty-bg: #FFFFFF;
  --empty-icon-bg: #EFF6FF;
  --empty-btn-bg: #F1F3F5;
  --empty-btn-hover-bg: #E5E7EB;
  --empty-btn-hover-border: rgba(0,0,0,0.12);

  /* Toast / Modal */
  --toast-bg: #FFFFFF;
  --modal-overlay: rgba(0,0,0,0.40);

  /* Glass — solid white in light mode */
  --glass-start: #FFFFFF;
  --glass-end: #FFFFFF;
  --glass-border: rgba(0,0,0,0.08);

  /* Scrollbar */
  --scrollbar-thumb: rgba(0,0,0,0.12);
  --scrollbar-hover: rgba(0,0,0,0.22);

  /* Tables */
  --table-header-bg: #F1F3F5;
  --table-row-hover: #F9FAFB;
  --table-border: rgba(0,0,0,0.08);

  /* Badges */
  --badge-muted-bg: #F1F3F5;
  --badge-muted-color: #6B7280;

  /* ── Shadows — Premium SaaS (Canvas vs. schwebende Karten) ── */
  --shadow-1: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-2: 0 6px 20px rgba(0,0,0,0.08);
  --shadow-3: 0 12px 36px rgba(0,0,0,0.12);
  --shadow-card: 0 10px 30px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 16px 42px rgba(0,0,0,0.085);
  --shadow-modal: 0 24px 56px rgba(0,0,0,0.1);
  --glow-acc: 0 0 0 1px rgba(37,99,235,0.20), 0 4px 14px rgba(37,99,235,0.12);

  /* ── Radii ── */
  --r-xs: 8px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 20px;

  color-scheme: light;
}