/* ============================================================
   Strompreisampel – Nordstern Color Token System
   Farbwelt A: Petroleum-Teal
   ============================================================
   Drei-Ebenen-Architektur:
     1. Primitive Tokens  – reine Farbwerte als nummerierte Skalen
     2. Semantische Tokens – funktionale Bedeutungsträger
     3. Komponenten-Tokens – komponentenspezifische Zuweisungen
   Dieses File wird nach Bootstrap geladen; Bootstrap-Variablen
   am Ende überschreiben die Bootstrap-Defaults global.
   ============================================================ */

:root {

    /* ==========================================================
       EBENE 1: PRIMITIVE TOKENS – Farbskalen
       Werden nie direkt im UI referenziert.
       Dienen als Quelle für semantische Tokens.
       ========================================================== */

    /* ----------------------------------------------------------
       Primary – Petroleum-Teal
       ---------------------------------------------------------- */
    --primitive-primary-50:  #E8F4F6;
    --primitive-primary-100: #C2E3E8;
    --primitive-primary-200: #8AC6CF;
    --primitive-primary-300: #52AAB7;
    --primitive-primary-400: #2E939F;
    --primitive-primary-500: #0E7C8C; /* Basis – Primärfarbe */
    --primitive-primary-600: #0C6B79;
    --primitive-primary-700: #095866;
    --primitive-primary-800: #074652;
    --primitive-primary-900: #05343E;
    --primitive-primary-950: #03232B;

    /* ----------------------------------------------------------
       Secondary – Ozeanblau
       ---------------------------------------------------------- */
    --primitive-secondary-50:  #EDF2F8;
    --primitive-secondary-100: #CADAEA;
    --primitive-secondary-200: #97B3D1;
    --primitive-secondary-300: #6590B8;
    --primitive-secondary-400: #4A78A3;
    --primitive-secondary-500: #34618E; /* Basis – Sekundärfarbe */
    --primitive-secondary-600: #2C5379;
    --primitive-secondary-700: #234464;
    --primitive-secondary-800: #1B354F;
    --primitive-secondary-900: #13273B;

    /* ----------------------------------------------------------
       Accent – Amber-Gold
       ---------------------------------------------------------- */
    --primitive-accent-50:  #FDF5E8;
    --primitive-accent-100: #F9E4C0;
    --primitive-accent-200: #F2CD8A;
    --primitive-accent-300: #EBB455;
    --primitive-accent-400: #DFA33A;
    --primitive-accent-500: #D4922A; /* Basis – Akzentfarbe */
    --primitive-accent-600: #B87B22;
    --primitive-accent-700: #9A641B;
    --primitive-accent-800: #7D4F15;
    --primitive-accent-900: #613C10;

    /* ----------------------------------------------------------
       Neutral – Schieferblau
       Kein reines Grau – immer mit leichtem Blau-Unterton.
       ---------------------------------------------------------- */
    --primitive-neutral-0:   #FFFFFF;
    --primitive-neutral-50:  #F8FAFB;
    --primitive-neutral-100: #EEF2F5;
    --primitive-neutral-150: #E3E9EE;
    --primitive-neutral-200: #DDE4EB;
    --primitive-neutral-300: #C8D3DE;
    --primitive-neutral-400: #B8C4D0;
    --primitive-neutral-500: #A0ADBB;
    --primitive-neutral-600: #7C8EA0;
    --primitive-neutral-700: #6B7D8E;
    --primitive-neutral-800: #4A5B6D;
    --primitive-neutral-900: #1A2636;
    --primitive-neutral-950: #0F1820;


    /* ==========================================================
       EBENE 2: SEMANTISCHE TOKENS
       ========================================================== */

    /* ----------------------------------------------------------
       Surfaces
       ---------------------------------------------------------- */
    --color-surface-page:          var(--primitive-neutral-50);   /* Äußerster Seitenhintergrund */
    --color-surface-primary:       var(--primitive-neutral-0);    /* Karten, Panels */
    --color-surface-secondary:     var(--primitive-neutral-100);  /* Sidebar, Tabellenköpfe */
    --color-surface-inverse:       var(--primitive-neutral-900);  /* Dunkle Overlays */
    --color-surface-brand-subtle:  var(--primitive-primary-50);   /* Info-Banner, aktive Filter */
    --color-surface-accent-subtle: var(--primitive-accent-50);    /* Tipp-Boxen */
    --color-surface-overlay:       #1A263680;                     /* Modal-Overlay */

    /* ----------------------------------------------------------
       Text
       ---------------------------------------------------------- */
    --color-text-primary:      var(--primitive-neutral-900); /* 14,5:1 → AAA – Überschriften, Fließtext */
    --color-text-secondary:    var(--primitive-neutral-700); /* 4,8:1  → AA  – Subtitles, Beschreibungen */
    --color-text-tertiary:     var(--primitive-neutral-500); /* 2,7:1  → dekorativ – Placeholder */
    --color-text-inverse:      var(--primitive-neutral-0);   /* Text auf dunklen Flächen */
    --color-text-brand:        var(--primitive-primary-500); /* 4,7:1  → AA  – Links, Brand-Werte */
    --color-text-brand-strong: var(--primitive-primary-600); /* 5,5:1  → AA  – Links auf subtle-bg */
    --color-text-link:         var(--primitive-primary-500); /* 4,7:1  → AA  – Standard-Link */
    --color-text-link-hover:   var(--primitive-primary-700); /* 7,0:1  → AAA – Link-Hover */

    /* ----------------------------------------------------------
       Borders
       ---------------------------------------------------------- */
    --color-border-default:    var(--primitive-neutral-200); /* Standard – Karten */
    --color-border-subtle:     var(--primitive-neutral-100); /* Dezente Trenner */
    --color-border-strong:     var(--primitive-neutral-400); /* Betonte Trenner */
    --color-border-brand:      var(--primitive-primary-500); /* Ausgewählte Elemente */
    --color-border-focus-ring: #0E7C8C40;                    /* Fokus-Ring (25% Opacity) */

    /* ----------------------------------------------------------
       Status: Success / Günstig
       Icon: Pfeil nach unten ↓
       ---------------------------------------------------------- */
    --color-status-success:            #1B7D4E;
    --color-status-success-subtle-bg:  #E6F4ED;
    --color-status-success-subtle-text:#15633E; /* 5,8:1 auf subtle-bg → AA */
    --color-status-success-border:     #8ECBAA;

    /* ----------------------------------------------------------
       Status: Warning / Normal
       Dunkelgold statt Standard-Gelb – besserer Kontrast, ruhigere Wirkung
       Icon: Strich –
       ---------------------------------------------------------- */
    --color-status-warning:            #8C6B10;
    --color-status-warning-subtle-bg:  #FDF5E1;
    --color-status-warning-subtle-text:#70560D; /* 6,2:1 auf subtle-bg → AA */
    --color-status-warning-strong-bg:  #8C6B10; /* genutzt von --bs-warning */

    /* ----------------------------------------------------------
       Status: Danger / Teuer
       Icon: Pfeil nach oben ↑
       ---------------------------------------------------------- */
    --color-status-danger:            #B83232;
    --color-status-danger-subtle-bg:  #FDECEC;
    --color-status-danger-subtle-text:#932828; /* 6,5:1 auf subtle-bg → AA */
    --color-status-danger-border:     #E09A9A;

    /* ----------------------------------------------------------
       Status: Info (Neutrale Hinweise)
       ---------------------------------------------------------- */
    --color-status-info:            #34618E;
    --color-status-info-subtle-bg:  #EDF2F8;
    --color-status-info-subtle-text:#2C5379; /* 7,0:1 auf subtle-bg → AAA */

    /* Charts – Infrastruktur */
    --color-chart-grid: var(--primitive-neutral-200); /* Rasterlinien (genutzt von charts.js) */


    /* ==========================================================
       EBENE 3: KOMPONENTEN-TOKENS
       ========================================================== */

    /* ----------------------------------------------------------
       Navigation / Header
       ---------------------------------------------------------- */
    --nav-bg:            var(--color-surface-primary);
    --nav-border-bottom: var(--color-border-default);

    /* ----------------------------------------------------------
       Karten / Panels
       ---------------------------------------------------------- */
    --card-bg:     var(--color-surface-primary);
    --card-border: var(--color-border-default);

    /* ----------------------------------------------------------
       Ampel-Indikator-Komponente
       Immer drei Elemente: (1) Farbpunkt (2) Text-Label (3) Icon
       ---------------------------------------------------------- */
    --ampel-dot-cheap:          var(--color-status-success);
    --ampel-dot-normal:         var(--color-status-warning);
    --ampel-dot-expensive:      var(--color-status-danger);
    --ampel-dot-ring-cheap:     #1B7D4E30;
    --ampel-dot-ring-expensive: #B8323230;

    /* ----------------------------------------------------------
       On-Colored-Background Overlays
       Weißbasierte Werte für Elemente auf Brand- oder Status-
       farbigen Hintergründen (Hero, Trust-Bar, Page-CTA).
       ---------------------------------------------------------- */
    --color-on-colored-solid:        var(--primitive-neutral-0);    /* #fff, volle Deckkraft */
    --color-on-colored-high:         rgba(255, 255, 255, 0.92);     /* Starker Text, aktiver Button-BG */
    --color-on-colored-medium:       rgba(255, 255, 255, 0.88);     /* Subtext auf dunklem CTA */
    --color-on-colored-muted:        rgba(255, 255, 255, 0.80);     /* Trust-Bar Links, Fließtext */
    --color-on-colored-subtle:       rgba(255, 255, 255, 0.75);     /* Dekorativer Punkt (CTA-Ampel) */
    --color-on-colored-dim:          rgba(255, 255, 255, 0.35);     /* Trust-Bar Unterstreichung */
    --color-on-colored-overlay:      rgba(255, 255, 255, 0.28);     /* Hero-Dot-Pulsring */
    --color-on-colored-focus:        rgba(255, 255, 255, 0.60);     /* Page-CTA Focus-Ring */
    --color-on-colored-focus-hero:   rgba(255, 255, 255, 0.80);     /* Hero-Button Focus-Ring */
    --color-hero-endkunde-bg:        rgba(0, 0, 0, 0.15);           /* Endkunden-Block auf Hero */
    --color-shadow-on-colored:       rgba(0, 0, 0, 0.18);           /* Button-Hover-Shadow auf farbigem BG */
    --color-shadow-dark:             rgba(0, 0, 0, 0.25);           /* Page-CTA Button-Hover-Shadow */


    /* ==========================================================
       BOOTSTRAP CSS-VARIABLEN OVERRIDE
       Bootstrap 5 nutzt CSS Custom Properties intern.
       Diese Overrides lassen alle Bootstrap-Utilities (bg-success,
       bg-warning, bg-danger, text-primary etc.) automatisch die
       Nordstern-Farben verwenden – ohne PHP-Templates zu ändern.
       ========================================================== */

    /* Semantische Farben */
    --bs-success:     var(--color-status-success);       /* #1B7D4E */
    --bs-success-rgb: 27, 125, 78;
    --bs-warning:     var(--color-status-warning-strong-bg); /* #8C6B10 */
    --bs-warning-rgb: 140, 107, 16;
    --bs-danger:      var(--color-status-danger);        /* #B83232 */
    --bs-danger-rgb:  184, 50, 50;
    --bs-info:        var(--color-status-info);          /* #34618E */
    --bs-info-rgb:    52, 97, 142;
    --bs-primary:     var(--primitive-primary-500);      /* #0E7C8C */
    --bs-primary-rgb: 14, 124, 140;
    --bs-secondary:   var(--primitive-neutral-700);      /* #6B7D8E */
    --bs-secondary-rgb:107, 125, 142;

    /* Text */
    --bs-body-color:     var(--color-text-primary);      /* #1A2636 */
    --bs-secondary-color:var(--color-text-secondary);    /* #6B7D8E – text-muted */
    --bs-tertiary-color: var(--color-text-tertiary);     /* #A0ADBB */

    /* Hintergrund */
    --bs-body-bg:        var(--color-surface-page);      /* #F8FAFB */
    --bs-tertiary-bg:    var(--color-surface-secondary); /* #EEF2F5 */

    /* Links */
    --bs-link-color:        var(--color-text-link);       /* #0E7C8C */
    --bs-link-color-rgb:    14, 124, 140;
    --bs-link-hover-color:  var(--color-text-link-hover); /* #095866 */
    --bs-link-hover-color-rgb: 9, 88, 102;

    /* Border */
    --bs-border-color:      var(--color-border-default);  /* #DDE4EB */
    --bs-border-color-translucent: rgba(221, 228, 235, 0.5);

    /* ----------------------------------------------------------
       Border-Radius-Skala
       Konsistente Größen verhindern die 6px/8px/12px/0.5rem/0.75rem-
       Fragmentierung quer durch alle Komponenten.
       ---------------------------------------------------------- */
    --radius-sm:  6px;   /* Buttons, Badges, Nav-Price-Badge */
    --radius-md:  8px;   /* FAQ-Items, Utility-Blöcke */
    --radius-lg: 12px;   /* Stat-Cards, Haupt-Cards */
    --radius-xl: 16px;   /* Hero-Endkunde-Block */
}