/* IVG Energy Solutions – Design-Tokens nach dem IVG Website Mockup (Design-Canvas).
   Geladen nach style.css. Werte gespiegelt in datenblatt.yaml → design.farben.
   Kontraste (WCAG AA, geprüft):
   Text #0A1A24 auf #F4F7F7 16,4:1 · gedämpft #4A5A63 auf #F4F7F7 6,6:1 / auf Weiß 7,2:1
   Link #1D6F94 auf Weiß 5,6:1 / auf #F4F7F7 5,2:1 / auf #E4F2DE 4,8:1
   Überzeile #2F7A22 auf #F4F7F7 5,0:1 / auf #E4F2DE 4,6:1
   Button-Text #0A1A24 auf Grün #65B94A 7,2:1 · Hellgrün #9FD68C auf #0A1A24 10,5:1
   #C9D3D8 auf #0A1A24 11,6:1 · #9FB2BC auf #102B3A 6,7:1 · #7CC4E3 auf #102B3A 7,6:1 */
:root {
  --color-bg: #FFFFFF;
  --color-surface: #F4F7F7;                      /* Seitengrund */
  --color-surface-alt: #E3E9EB;                  /* Segment-/Tab-Grund */
  --color-border: #DCE3E6;
  --color-text: #0A1A24;
  --color-text-muted: #4A5A63;
  --color-text-faint: #5B6870;

  --color-navy: #0A1A24;                         /* Kopf, Hero, dunkle Abschnitte, Footer */
  --color-navy-deep: #0A1A24;
  --color-navy-light: #102B3A;                   /* Panels auf Dunkel */

  --color-accent: #1D6F94;                       /* Links, Fokus */
  --color-accent-hover: #0A1A24;
  --color-accent-dark: #1D6F94;
  --color-accent-light: #E6F0F5;

  --color-teal: #2F7A22;                         /* Grün auf Hell: Überzeilen, Häkchen */
  --color-teal-soft: #E4F2DE;

  --color-success: #2F6B1F;
  --color-warning: #8A5A00;
  --color-error: #B94747;

  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #C9D3D8;
  --color-highlight: #9FD68C;                    /* Grün auf Dunkel */
  --color-highlight-soft: #9FD68C;

  --rgb-accent: 29, 111, 148;
  --rgb-accent-soft: 42, 155, 203;
  --rgb-teal: 101, 185, 74;
  --rgb-teal-dark: 47, 122, 34;
  --rgb-teal-deep: 36, 84, 24;
  --rgb-navy: 10, 26, 36;
  --rgb-navy-deep: 10, 26, 36;
  --rgb-highlight: 159, 214, 140;
  --rgb-success: 47, 107, 31;

  /* IVG-eigene Werte aus dem Mockup */
  --ivg-gruen: #65B94A;                          /* Handlungsfarbe (Buttons, CTA-Band) */
  --ivg-gruen-hover: #74C659;
  --ivg-gruen-hell: #9FD68C;
  --ivg-gruen-flaeche: #E4F2DE;
  --ivg-fluss: #2A9BCB;                          /* Energiefluss-Linien */
  --ivg-panel: #102B3A;
  --ivg-panel-rand: #1E3F52;
  --ivg-linie-dunkel: #1E3442;
  --ivg-rand-dunkel: #5E7684;
  --ivg-label-dunkel: #9FB2BC;
  --ivg-blau-dunkel: #7CC4E3;
  --ivg-zeile: #EEF2F3;

  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.8125rem;                          /* 13 px */
  --text-sm: 0.9375rem;                          /* 15 px */
  --text-base: 1.125rem;                         /* 18 px */
  --text-lg: 1.25rem;                            /* 20 px */
  --text-xl: 1.625rem;                           /* 26 px */
  --text-2xl: 2.125rem;                          /* 34 px */
  --text-3xl: 2.75rem;                           /* 44 px */
  --text-hero: 3.75rem;                          /* 60 px */

  --container: 1440px;
  --container-narrow: 960px;
  --radius: 14px;
  --radius-lg: 16px;
  --radius-btn: 6px;
  --shadow-sm: none;
  --shadow-md: 0 12px 32px -18px rgba(10, 26, 36, 0.28);
  --shadow-lg: 0 20px 48px -20px rgba(10, 26, 36, 0.30);
}