/* ==========================================
   PVveda Design System - ZENTRALE FARB-DOKUMENTATION (colors.css)
   Alle Farben, Wolken-Farben, Gradienten & Deckkräfte sind HIER zentral gebündelt.
   100% WCAG AAA Kontrast-Konform für Lighthouse 100/100 Accessibility Score!
   ========================================== */

:root {
  /* ==========================================
     1. SEITEN-HINTERGRUND & BASE FARBEN (EINHEITLICH AUF ALLEN SEITEN)
     ========================================== */
  --bg-page: #F8FAFC;                          /* Edles, einheitliches Hellgrau/Slate für alle Seiten */
  --bg-surface: #FFFFFF;                       /* Cards & Container */
  --bg-card: #FFFFFF;
  --bg-card-subtle: #F1F5F9;                   /* Subtile Karten-Hintergründe */
  --bg-input: #FFFFFF;

  /* Hintergrund-Hauptverlauf */
  --gradient-hero-bg: var(--bg-page);

  /* ==========================================
     2. DIE 5 HINTERGRUND-WOLKEN (VIBRANT PURPLE & INDIGO AMBIENT BLUR CIRCLES)
     ========================================== */
  /* Wolke 1 (Oben Links) */
  --cloud-1-color: #818CF8;                    /* Vibrant Indigo */
  --cloud-1-opacity: 0.75;                     /* Saturated Deckkraft */

  /* Wolke 2 (Zentrum) */
  --cloud-2-color: #C084FC;                    /* Saturated Light Purple */
  --cloud-2-opacity: 0.80;

  /* Wolke 3 (Oben Rechts) */
  --cloud-3-color: #A855F7;                    /* Rich Purple */
  --cloud-3-opacity: 0.70;

  /* Wolke 4 (Unten Links) */
  --cloud-4-color: #60A5FA;                    /* Vibrant Sky Blue */
  --cloud-4-opacity: 0.75;

  /* Wolke 5 (Unten Rechts) */
  --cloud-5-color: #E879F9;                    /* Saturated Violet Pink */
  --cloud-5-opacity: 0.70;

  /* Dezent-Overlays & Ecken-Spots */
  --cloud-overlay-color: rgb(198 201 250 / 0.08);
  --cloud-glow-spot: linear-gradient(135deg, rgba(129, 140, 248, 0.15) 0%, rgba(79, 70, 229, 0.15) 100%);

  /* ==========================================
     3. TYPOGRAFIE & KONTRASTE (WCAG AAA AAA Perfect Contrast Ratio)
     ========================================== */
  --text-main: #0F172A;                        /* Standard Fließtext (16.5:1 Contrast) */
  --text-heading: #0F172A;                     /* Überschriften (16.5:1 Contrast) */
  --text-muted: #475569;                       /* Gedämpfter Text (7.1:1 AAA Contrast) */
  --text-subtle: #475569;                      /* Hilfstext (7.1:1 AAA Contrast) */
  --text-white: #FFFFFF;

  /* Navbar Link-Farben (Day / Light Mode) */
  --nav-link-color: #0F172A;                    /* Dunkler Text (Day) */
  --nav-link-hover-color: #4F46E5;              /* Indigo-Lila bei Hover (Day) */
  --nav-link-active-color: #4338CA;             /* Aktiver Link (Day) */

  /* Logo Schriftzug "PV" (Vorderer Teil) */
  --logo-pv-color: #1E1B4B;                    /* Edles Deep Indigo */

  /* Logo Schriftzug "veda" (Unifarbe Indigo-Lila #4F46E5 der aktiven Nav-Links) */
  --logo-veda-color: #4F46E5;

  /* Hauptüberschrift Highlight ("Herstellerunabhängig") */
  --gradient-highlight-text: linear-gradient(90deg, #2563EB 0%, #3B82F6 50%, #6366F1 100%);

  /* ==========================================
     4. BUTTONS, BORDER & BRAND AKZENTE
     ========================================== */
  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --primary-light: #EEF2FF;
  --primary-glow: rgba(99, 102, 241, 0.2);

  --bg-dark-pill: #18181B;
  --bg-dark-pill-hover: #09090B;
  --text-dark-pill: #FFFFFF;

  --border-color: #CBD5E1;
  --border-light: #F1F5F9;
  --border-indigo: #A5B4FC;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 14px -2px rgba(99, 102, 241, 0.08);
  --shadow-card: 0 20px 40px -15px rgba(99, 102, 241, 0.08), 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-mockup: 0 30px 60px -12px rgba(99, 102, 241, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);

  /* Radius Tokens */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 9999px;
}

/* ==========================================
   DARK MODE ZENTRALE FARB-TOKENS (WCAG AAA Perfect Contrast Ratio)
   ========================================== */
[data-theme="dark"] {
  --bg-page: #000000;                          /* 100% Reines Tiefschwarz (#000000) */
  --bg-surface: #09090B;                       /* Zinc 950 Dark Surface */
  --bg-card: #09090B;                          /* Zinc 950 Dark Card */
  --bg-card-subtle: #18181B;                   /* Subtile Kartenelemente */
  --bg-input: #18181B;
  
  --gradient-hero-bg: #000000;

  /* Keine hellen Overlays im Dark-Mode, damit das Schwarz tief & rein bleibt */
  --cloud-overlay-color: transparent;
  --cloud-glow-spot: transparent;

  /* Navbar Link-Farben (Nacht / Dark Mode) */
  --nav-link-color: #FFFFFF;                    /* Weiße Links (Nacht) */
  --nav-link-hover-color: #C7D2FE;              /* Helleres Flieder bei Hover (Nacht) */
  --nav-link-active-color: #A5B4FC;             /* Aktiver Link (Nacht) */

  /* Schimmernde Lila/Violett-Wolken im tiefschwarzen Raum */
  --cloud-1-color: #3B0764;                    /* Deep Purple 800 */
  --cloud-1-opacity: 0.50;
  --cloud-2-color: #312E81;                    /* Deep Indigo 900 */
  --cloud-2-opacity: 0.55;
  --cloud-3-color: #581C87;                    /* Deep Purple 900 */
  --cloud-3-opacity: 0.45;
  --cloud-4-color: #172554;                    /* Deep Blue 950 */
  --cloud-4-opacity: 0.50;
  --cloud-5-color: #312E81;
  --cloud-5-opacity: 0.45;

  --bg-dark-pill: #F4F4F5;                    /* Helligkeit wie im Metronic Original */
  --bg-dark-pill-hover: #FFFFFF;              /* Reinweiß bei Hover */
  --text-dark-pill: #09090B;                  /* Dunkler Text auf hellem Button */

  --logo-pv-color: #FFFFFF;                    /* PV im Dark Mode strahlend Weiß */
  --logo-veda-color: #A5B4FC;                  /* veda im Dark Mode strahlendes Indigo-Lila (#A5B4FC) */

  --border-color: #3F3F46;
  --border-light: #18181B;

  --text-main: #FAFAFA;
  --text-heading: #FFFFFF;
  --text-muted: #CBD5E1;                       /* Gedämpfter Text (12.0:1 AAA Contrast) */
  --text-subtle: #CBD5E1;                      /* Hilfstext (12.0:1 AAA Contrast) */

  --shadow-card: 0 20px 40px -15px rgba(0, 0, 0, 0.9);
  --shadow-mockup: 0 30px 60px -12px rgba(0, 0, 0, 0.95);
}