/* === SALTO COLOR PALETTE ===
   Zentrale Farbdefinitionen. Einzige Quelle der Wahrheit für alle Farben.
   Alle anderen CSS-Files referenzieren ausschließlich diese Variablen.

   Nomenklatur pro Markenfarbe (analoges Naming-Schema):
     --{brand}-base    Hauptfarbe (aus Designvorlage docs/article-svg/colors.svg)
     --{brand}-medium  Mittlere Variante (heller als base; aus Designvorlage oder interpoliert*)
     --{brand}-light   Sehr helle Tint-Variante für Hintergründe (aus Designvorlage)
     --{brand}-hover   Hover-Zustand (aus Designvorlage oder interpoliert*)
     --{brand}-active  Aktiv/Gedrückt-Zustand (aus Designvorlage oder interpoliert*)

   *interpoliert = berechnet wo Designvorlage keinen Wert definiert hat

   Quelldatei Design: docs/article-svg/colors.svg
*/

:root {

  /* ================================================
     NEUTRALS
     ================================================ */
  --neutral-white:    #ffffff;
  --neutral-light:    #F7F7F7;   /* Seitenbackground, helle Flächen */
  --neutral-muted:    #CACACA;   /* Disabled-Zustand */
  --neutral-border:   #EFEFEF;   /* Subtile Trennlinien */
  --neutral-dark:     #212529;   /* Fließtext, dunkle Flächen */
  --neutral-black:    #07080A;   /* Nur für extremen Kontrast */

  /* Text-Aliases */
  --text-on-light:    var(--neutral-dark);
  --text-on-dark:     var(--neutral-light);

  /* ================================================
   SALTO (Brand-Blau)
   ================================================ */
  --salto-base:       #0D6EFD;   /* aus colors.svg */
  --salto-medium:     #E8F0FE;   /* aus colors.svg (leichter als base) */
  --salto-light:      #f3f7ff;   /* aus colors.svg (Hintergrund-Tint) */
  --salto-hover:      #3284Fc;   /* aus colors.svg (Interaktion: hover) */
  --salto-active:     #025BE1;   /* aus colors.svg (Interaktion: active/pressed) */

  /* ================================================
     COMMUNITY (Grün)
     ================================================ */
  --community-base:   #03CEA4;   /* aus colors.svg */
  --community-medium: #e1fbf6;   /* aus colors.svg */
  --community-light:  #effdfa;   /* aus colors.svg (Hintergrund-Tint) */
  --community-hover:  #04dcb0;   /* aus colors.svg (Interaktion: hover) */
  --community-active: #03B18E;   /* aus colors.svg (Interaktion: active) */


  /* ================================================
     PARTNER (Lila/Magenta)
     ================================================ */
  --partner-base:     #7D0068;   /* aus colors.svg */
  --partner-medium:   #F0E5EF;   /* aus colors.svg */
  --partner-light:    #f7f2f7;   /* aus colors.svg (Hintergrund-Tint) */
  --partner-hover:    #97007d;   /* aus colors.svg (Interaktion: hover) */
  --partner-active:   #5B004C;   /* aus colors.svg (Interaktion: active) */


  /* ================================================
     DOSSIER (Rot/Koralle)
     ================================================ */
  --dossier-base:     #FF5757;   /* aus colors.svg */
  --dossier-medium:   #FFedee;   /* aus colors.svg */
  --dossier-light:    #Fff7f7;   /* aus colors.svg (Hintergrund-Tint) */
  --dossier-hover:    #ff7c7c;   /* interpoliert* (zwischen medium und light) */
  --dossier-active:   #FF1e1e;   /* aus colors.svg (dunkler als base) */

  /* ================================================
     MUSIC / SALTO.MUSIC (Violett)
     ================================================ */
  --music-base:       #AF13FB;   /* aus colors.svg */
  --music-medium:     #C556FC;   /* interpoliert* (heller als base, aus SVG-Extraktion) */
  --music-light:      #F1D8FF;   /* aus colors.svg (Hintergrund-Tint) */
  --music-hover:      #C556FC;   /* interpoliert* (= medium; kein separater Hover in Vorlage) */
  --music-active:     #9903E4;   /* interpoliert* (dunkler als base; aus SVG-Extraktion) */

  /* Music-Header-Gradient (nur für salto.music Bereich) */
  --music-header-from: #C300C7;
  --music-header-to:   #FF9900;


  /* ================================================
     ADS / ADVERTORIAL (Grau)
     ================================================ */
  --ads-base:         #616971;   /* aus colors.svg */
  --ads-medium:       #eff0f1;   /* aus colors.svg */
  --ads-light:        #f7f7f8;   /* aus colors.svg (Hintergrund-Tint) */
  --ads-hover:        #747E88;   /* aus colors.svg (= medium; kein separater Hover) */
  --ads-active:       #525A61;   /* aus colors.svg (Interaktion: active) */


  /* ================================================
     BREAKING NEWS / FLASH (Amber/Gelb)
     ================================================ */
  --breaking-base:    #FFB700;   /* aus colors.svg */
  --breaking-medium:  #fff8e3;   /* aus colors.svg */
  --breaking-light:   #ffbf1;   /* aus colors.svg (Hintergrund-Tint) */
  --breaking-hover:   #FFC32b;   /* interpoliert* (zwischen medium und light) */
  --breaking-active:  #DB9D00;   /* aus colors.svg (Interaktion: active) */


  /* ================================================
     SPECIAL GRADIENT COLORS
     ================================================ */
  /* Donation-Banner-Gradient */
  --donation-1:       var(--community-base);   /* #03CEA4 */
  --donation-2:       var(--salto-base);       /* #0D6EFD */
  --donation-3:       var(--partner-base);     /* #7D0068 */

  /* Weekend-Gradient */
  --weekend-1:        #00C77F;
  --weekend-2:        #00D1FF;


  /* ================================================
     STATE / FEEDBACK COLORS (Bootstrap-kompatibel)
     ================================================ */
  --state-danger-base:    #DC3545;
  --state-danger-hover:   #E35D6A;   /* aus colors.svg (heller) */
  --state-danger-active:  #B02A37;   /* aus colors.svg (dunkler) */

  --state-warning-base:   #FFC107;
  --state-warning-hover:  #FFCD39;   /* aus colors.svg */
  --state-warning-active: #CC9A06;   /* aus colors.svg */

  --state-success-base:   #198754;
  --state-success-hover:  #479F76;   /* aus colors.svg */
  --state-success-active: #146C43;   /* aus colors.svg */

  --state-info-base:      #0DCAF0;
  --state-info-hover:     #3DD5F3;   /* aus colors.svg */
  --state-info-active:    #0AA2C0;   /* aus colors.svg */

  --state-dark-base:      #212529;
  --state-dark-hover:     #212529;   /* keine Variante definiert */
  --state-dark-active:    #212529;   /* keine Variante definiert */

  --state-disabled-bg:    var(--neutral-muted);
  --state-disabled-text:  var(--text-on-light);


  /* ================================================
     FONTS
     ================================================ */
  --font-serif:  "Source Serif 4", serif;
  --font-sans:   "Source Sans 3", sans-serif;
  --font-music:  "mayenne sans", sans-serif;


  /* ================================================
     COMPAT-ALIASE (alte --salto-*-Variablennamen)
     Modul-CSS (delta-17-Aggregate) referenziert noch die alten Namen aus
     bootstrap_salto. Diese Aliase stellen sicher, dass color:var(--salto-*) !important-
     Regeln aus Modul-Templates korrekt auflösen statt auf inherit/schwarz zu fallen.
     Nie hardcoden – immer auf neue Tokens zeigen.
     ================================================ */
  --salto-primary:             var(--salto-base);       /* #0D6EFD SALTO-Blau */
  --salto-white:               #FFFFFF;
  --salto-editor-primary:      var(--salto-base);       /* #0D6EFD */
  --salto-editor-background-0: color-mix(in srgb, var(--salto-base) 10%, transparent);
  --salto-community-primary:   var(--community-base);   /* #03CEA4 */
  --salto-partner-primary:     var(--partner-base);     /* #7D0068 */
  --salto-font-serif:          var(--font-serif);       /* "Source Serif 4" */

}