/* === SALTO DESIGN TOKENS ===
   Rollenbasierte Farb-Tokens – referenzieren ausschließlich Variablen aus colors.css.
   Naming-Schema: --{role}-{variant}-{type}
     Varianten: regular | light | reverse-1 | reverse-2 | reverse-3
     Types:     headings | background | text

   Article Roles: editor | columnist | community | external |
                  partner-content | partner-plus-content | advertorial
*/

:root {

  /* ================================================
     Schrift-Aliases (aus colors.css)
     ================================================ */
  --salto-font-serif: var(--font-serif);
  --salto-font-sans:  var(--font-sans);
  --salto-font-music: var(--font-music);


  /* ================================================
     EDITOR  (= SALTO-Blau)
     ================================================ */
  --editor-regular-headings:    var(--salto-base);
  --editor-regular-background:  var(--neutral-light);
  --editor-regular-text:        var(--text-on-light);

  --editor-light-headings:      var(--salto-base);
  --editor-light-background:    var(--salto-medium);
  --editor-light-text:          var(--text-on-light);

  --editor-medium-headings:     var(--salto-base);
  --editor-medium-background:   var(--salto-medium);
  --editor-medium-text:         var(--text-on-light);

  --editor-reverse-1-headings:   var(--text-on-dark);
  --editor-reverse-1-background: var(--salto-base);
  --editor-reverse-1-text:       var(--text-on-dark);

  --editor-reverse-2-headings:   var(--salto-base);
  --editor-reverse-2-background: var(--neutral-light);
  --editor-reverse-2-text:       var(--text-on-light);

  --editor-reverse-3-headings:   var(--salto-base);
  --editor-reverse-3-background: var(--neutral-dark);
  --editor-reverse-3-text:       var(--text-on-dark);

  --editor-hover-bg:   var(--salto-hover);
  --editor-active-bg:  var(--salto-active);


  /* ================================================
     COLUMNIST  (= SALTO-Blau, Sonderdarstellung)
     ================================================ */
  --columnist-regular-headings:    var(--salto-base);
  --columnist-regular-background:  var(--salto-light);
  --columnist-regular-text:        var(--text-on-light);

  --columnist-light-headings:      var(--salto-base);
  --columnist-light-background:    var(--salto-light);
  --columnist-light-text:          var(--text-on-light);

  --columnist-medium-headings:     var(--salto-base);
  --columnist-medium-background:   var(--salto-medium);
  --columnist-medium-text:         var(--text-on-light);

  --columnist-reverse-1-headings:   var(--text-on-dark);
  --columnist-reverse-1-background: var(--salto-base);
  --columnist-reverse-1-text:       var(--text-on-dark);

  --columnist-reverse-2-headings:   var(--salto-base);
  --columnist-reverse-2-background: var(--salto-light);
  --columnist-reverse-2-text:       var(--text-on-light);

  --columnist-reverse-3-headings:   var(--salto-base);
  --columnist-reverse-3-background: var(--neutral-dark);
  --columnist-reverse-3-text:       var(--text-on-dark);

  --columnist-hover-bg:   var(--salto-hover);
  --columnist-active-bg:  var(--salto-active);


  /* ================================================
     COMMUNITY  (= Community-Grün)
     ================================================ */
  --community-article-regular-headings:    var(--community-base);
  --community-article-regular-background:  var(--community-light);  /* helles Türkis; zentral überschrieben unten */
  --community-article-regular-text:        var(--text-on-light);

  --community-article-light-headings:      var(--community-base);
  --community-article-light-background:    var(--community-light);
  --community-article-light-text:          var(--text-on-light);

  --community-article-medium-headings:     var(--community-base);
  --community-article-medium-background:   var(--community-medium);
  --community-article-medium-text:         var(--text-on-light);

  --community-article-reverse-1-headings:   var(--text-on-dark);
  --community-article-reverse-1-background: var(--community-base);
  --community-article-reverse-1-text:       var(--text-on-dark);

  --community-article-reverse-2-headings:   var(--community-base);
  --community-article-reverse-2-background: var(--community-light);
  --community-article-reverse-2-text:       var(--text-on-light);

  --community-article-reverse-3-headings:   var(--community-base);
  --community-article-reverse-3-background: var(--neutral-dark);
  --community-article-reverse-3-text:       var(--text-on-dark);

  --community-article-hover-bg:   var(--community-hover);
  --community-article-active-bg:  var(--community-active);


  /* ================================================
     COMMUNITY-SALTO-SELECTION  (= Community-Grün, identisch mit community)
     Artikelrolle für von der Redaktion ausgewählte Community-Beiträge (term 111).
     ================================================ */
  --community-salto-selection-regular-headings:    var(--community-base);
  --community-salto-selection-regular-background:  var(--community-light);
  --community-salto-selection-regular-text:        var(--text-on-light);

  --community-salto-selection-light-headings:      var(--community-base);
  --community-salto-selection-light-background:    var(--community-light);
  --community-salto-selection-light-text:          var(--text-on-light);

  --community-salto-selection-medium-headings:     var(--community-base);
  --community-salto-selection-medium-background:   var(--community-medium);
  --community-salto-selection-medium-text:         var(--text-on-light);

  --community-salto-selection-reverse-1-headings:   var(--text-on-dark);
  --community-salto-selection-reverse-1-background: var(--community-base);
  --community-salto-selection-reverse-1-text:       var(--text-on-dark);

  --community-salto-selection-reverse-2-headings:   var(--community-base);
  --community-salto-selection-reverse-2-background: var(--community-light);
  --community-salto-selection-reverse-2-text:       var(--text-on-light);

  --community-salto-selection-reverse-3-headings:   var(--community-base);
  --community-salto-selection-reverse-3-background: var(--neutral-dark);
  --community-salto-selection-reverse-3-text:       var(--text-on-dark);

  --community-salto-selection-hover-bg:   var(--community-hover);
  --community-salto-selection-active-bg:  var(--community-active);


  /* ================================================
     EXTERNAL  (= SALTO-Blau)
     ================================================ */
  --external-regular-headings:    var(--salto-base);
  --external-regular-background:  var(--salto-light);
  --external-regular-text:        var(--text-on-light);

  --external-light-headings:      var(--salto-base);
  --external-light-background:    var(--salto-medium);
  --external-light-text:          var(--text-on-light);

  --external-medium-headings:     var(--salto-base);
  --external-medium-background:   var(--salto-medium);
  --external-medium-text:         var(--text-on-light);

  --external-reverse-1-headings:   var(--text-on-dark);
  --external-reverse-1-background: var(--salto-base);
  --external-reverse-1-text:       var(--text-on-dark);

  --external-reverse-2-headings:   var(--salto-base);
  --external-reverse-2-background: var(--salto-light);
  --external-reverse-2-text:       var(--text-on-light);

  --external-reverse-3-headings:   var(--salto-base);
  --external-reverse-3-background: var(--neutral-dark);
  --external-reverse-3-text:       var(--text-on-dark);

  --external-hover-bg:   var(--salto-hover);
  --external-active-bg:  var(--salto-active);


  /* ================================================
     PARTNER-CONTENT  (= Partner-Lila)
     ================================================ */
  --partner-content-regular-headings:    var(--partner-base);
  --partner-content-regular-background:  var(--partner-light);
  --partner-content-regular-text:        var(--text-on-light);

  --partner-content-light-headings:      var(--partner-base);
  --partner-content-light-background:    var(--partner-light);
  --partner-content-light-text:          var(--text-on-light);

  --partner-content-medium-headings:     var(--partner-base);
  --partner-content-medium-background:   var(--partner-medium);
  --partner-content-medium-text:         var(--text-on-light);

  --partner-content-reverse-1-headings:   var(--text-on-dark);
  --partner-content-reverse-1-background: var(--partner-base);
  --partner-content-reverse-1-text:       var(--text-on-dark);

  --partner-content-reverse-2-headings:   var(--partner-base);
  --partner-content-reverse-2-background: var(--partner-light);
  --partner-content-reverse-2-text:       var(--text-on-light);

  --partner-content-reverse-3-headings:   var(--partner-base);
  --partner-content-reverse-3-background: var(--neutral-dark);
  --partner-content-reverse-3-text:       var(--text-on-dark);

  --partner-content-hover-bg:   var(--partner-hover);
  --partner-content-active-bg:  var(--partner-active);


  /* ================================================
     PARTNER-PLUS-CONTENT  (= Partner-Lila)
     ================================================ */
  --partner-plus-content-regular-headings:    var(--partner-base);
  --partner-plus-content-regular-background:  var(--partner-light);
  --partner-plus-content-regular-text:        var(--text-on-light);

  --partner-plus-content-light-headings:      var(--partner-base);
  --partner-plus-content-light-background:    var(--partner-light);
  --partner-plus-content-light-text:          var(--text-on-light);

  --partner-plus-content-medium-headings:     var(--partner-base);
  --partner-plus-content-medium-background:   var(--partner-medium);
  --partner-plus-content-medium-text:         var(--text-on-light);

  --partner-plus-content-reverse-1-headings:   var(--text-on-dark);
  --partner-plus-content-reverse-1-background: var(--partner-base);
  --partner-plus-content-reverse-1-text:       var(--text-on-dark);

  --partner-plus-content-reverse-2-headings:   var(--partner-base);
  --partner-plus-content-reverse-2-background: var(--partner-light);
  --partner-plus-content-reverse-2-text:       var(--text-on-light);

  --partner-plus-content-reverse-3-headings:   var(--partner-base);
  --partner-plus-content-reverse-3-background: var(--neutral-dark);
  --partner-plus-content-reverse-3-text:       var(--text-on-dark);

  --partner-plus-content-hover-bg:   var(--partner-hover);
  --partner-plus-content-active-bg:  var(--partner-active);


  /* ================================================
     ADVERTORIAL  (= Ads-Grau)
     ================================================ */
  --advertorial-regular-headings:    var(--ads-base);
  --advertorial-regular-background:  var(--ads-light);
  --advertorial-regular-text:        var(--text-on-light);

  --advertorial-light-headings:      var(--ads-base);
  --advertorial-light-background:    var(--ads-light);
  --advertorial-light-text:          var(--text-on-light);

  --advertorial-medium-headings:     var(--ads-base);
  --advertorial-medium-background:   var(--ads-medium);
  --advertorial-medium-text:         var(--text-on-light);

  --advertorial-reverse-1-headings:   var(--text-on-dark);
  --advertorial-reverse-1-background: var(--ads-base);
  --advertorial-reverse-1-text:       var(--text-on-dark);

  --advertorial-reverse-2-headings:   var(--ads-base);
  --advertorial-reverse-2-background: var(--ads-light);
  --advertorial-reverse-2-text:       var(--text-on-light);

  --advertorial-reverse-3-headings:   var(--ads-base);
  --advertorial-reverse-3-background: var(--neutral-dark);
  --advertorial-reverse-3-text:       var(--text-on-dark);

  --advertorial-hover-bg:   var(--ads-hover);
  --advertorial-active-bg:  var(--ads-active);


  /* ================================================
     STATE-FARBEN (Bootstrap-nah, für globale Verwendung)
     ================================================ */
  --state-danger-bg:      var(--state-danger-base);
  --state-danger-hover-bg:  var(--state-danger-hover);
  --state-danger-active-bg: var(--state-danger-active);
  --state-danger-text:    var(--text-on-dark);

  --state-warning-bg:     var(--state-warning-base);
  --state-warning-hover-bg: var(--state-warning-hover);
  --state-warning-active-bg: var(--state-warning-active);
  --state-warning-text:   var(--text-on-dark);

  --state-success-bg:     var(--state-success-base);
  --state-success-hover-bg: var(--state-success-hover);
  --state-success-active-bg: var(--state-success-active);
  --state-success-text:   var(--text-on-dark);

  --state-info-bg:        var(--state-info-base);
  --state-info-hover-bg:  var(--state-info-hover);
  --state-info-active-bg: var(--state-info-active);
  --state-info-text:      var(--text-on-dark);

  --state-disabled-secondary-bg:     var(--neutral-light);
  --state-disabled-secondary-border: var(--neutral-muted);

}


/* ====================================================================
   ARTIKEL-SEITEN HINTERGRÜNDE — zentrale Übersicht
   Hier alle Seiten-Hintergründe (regular + light) pro Artikelrolle
   einstellen. Diese Regeln überschreiben die per-Rollen-Defaults oben
   (CSS: letztes :root-Block gewinnt bei gleicher Spezifität).

   Anwendung: body.node--type-article #main-wrapper (→ schemes.css)
   Verfügbare Farbvariablen aus colors.css:
     --neutral-light (#F7F7F7), --neutral-dark (#212529)
     --salto-light (#E8F0FE), --salto-base (#0D6EFD)
     --community-light (#D5F4ED), --community-base (#03CEA4)
     --partner-light (#F0E5EF), --partner-base (#7D0068)
     --ads-light (#E1E4E7), --ads-base (#616971)
   ==================================================================== */
:root {
  /* EDITOR */
  --editor-regular-background:               #fff;                   /* weiß (einstweilen) */
  --editor-light-background:                 #fff;

  /* KOLUMNISTEN */
  --columnist-regular-background:            var(--salto-light);     /* hellblau #E8F0FE */
  --columnist-light-background:              var(--salto-light);

  /* COMMUNITY */
  --community-article-regular-background:    var(--community-light); /* helles Türkis #D5F4ED */
  --community-article-light-background:      var(--community-light);

  /* COMMUNITY SALTO SELECTION (= community) */
  --community-salto-selection-regular-background: var(--community-light);
  --community-salto-selection-light-background:   var(--community-light);

  /* EXTERNAL */
  --external-regular-background:             #fff;                   /* wie editor */
  --external-light-background:               #fff;

  /* PARTNER CONTENT */
  --partner-content-regular-background:      var(--partner-light);   /* helles Lila #F0E5EF */
  --partner-content-light-background:        var(--partner-light);

  /* PARTNER PLUS CONTENT */
  --partner-plus-content-regular-background: var(--partner-light);
  --partner-plus-content-light-background:   var(--partner-light);

  /* ADVERTORIAL */
  --advertorial-regular-background:          var(--ads-light);       /* helles Grau #E1E4E7 */
  --advertorial-light-background:            var(--ads-light);
}


/* ================================================
   GLOBAL UTILITY CLASSES
   Hier, damit sie überall geladen werden (design-tokens Library ist globale Basis).
   ================================================ */

/* Font-Familie-Utilities — abhängig von --font-* Tokens in colors.css */
.font-salto-serif { font-family: var(--font-serif) !important; }
.font-salto-sans  { font-family: var(--font-sans)  !important; }
.font-salto-music { font-family: var(--font-music) !important; }

/* Letter-Spacing-Utilities */
.ls-1 { letter-spacing: .05em !important; }
.ls-2 { letter-spacing: .1em  !important; }
.ls-3 { letter-spacing: .2em  !important; }
.ls-4 { letter-spacing: .3em  !important; }
.ls-5 { letter-spacing: .4em  !important; }

/* fw-black: Bootstrap kennt kein fw-black */
.fw-black { font-weight: 900 !important; }