/* variables-2k25.css
   Farb-Tokens (rollen- & markenbasiert) – reine Variablendefinitionen.
   Die konkrete Anwendung (Headings/Buttons/Links etc.) passiert in styles-2k25.css
*/

:root {
  /* ==========================
     Basis-Neutrale Farben
     ========================== */
  --color-light-bg: #F7F7F7;
  --color-dark-bg: #212529;
  --color-white-bg: #ffffff;

  /* Für Texte auf dunklem BG */
  --color-light-text: #F7F7F7;
  --color-dark-text: #212529;

  /* ==========================
     SALTO (Brand)
     ========================== */
  /* Grundfarben laut Grafik */
  --salto-base: #0D6EFD;
  --salto-medium-bg: #0D6EFD;
  --salto-light-bg-token: #0D6EFD; /* Design-Token */

  /* Rollenbasierte Schemes (regular/reverse/light) */
  --salto-regular-headings: var(--salto-base);
  --salto-regular-background: var(--color-light-bg);
  --salto-regular-text: var(--color-dark-text);

  --salto-reverse-headings: var(--color-light-text);
  --salto-reverse-background: var(--salto-base);
  --salto-reverse-text: var(--color-light-text); /* Text auf dunklem BG = „salto-light“ */

  /* „Light“ = aufgehelltes BG mit dunklem Text */
  --salto-light-headings: var(--salto-base);
  --salto-light-background: #E8F0FE;
  --salto-light-text: var(--color-dark-text);   /* „salto-dark“ */

  /* Alias je Scheme-Variante */
  --salto-reverse-1-headings: var(--salto-reverse-headings);
  --salto-reverse-1-background: var(--salto-reverse-background);
  --salto-reverse-1-text: var(--salto-reverse-text);

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

  --salto-reverse-3-headings: var(--salto-regular-headings);
  --salto-reverse-3-background: var(--color-dark-bg);
  --salto-reverse-3-text: var(--color-light-text);

  /* Interaktions-Varianten (Buttons/Links etc.) */
  --salto-hover-bg: #3D8BFD;
  --salto-active-bg: #025BE1;

  --salto-secondary-border: var(--salto-base);
  --salto-secondary-hover-border: #3D8BFD;
  --salto-secondary-active-border: #025BE1;

  /* SALTO White Hover */
  --salto-white-hover-bg: var(--color-light-bg);
  --salto-white-hover-text: var(--color-dark-text);

  /* ==========================
     COMMUNITY
     ========================== */
  --community-base: #03CEA4;

  --community-regular-headings: var(--community-base);
  /* Regular-Background = Light-Background */
  --community-light-background: #D5F4ED;
  --community-light-headings: var(--community-base);
  --community-light-text: var(--color-dark-text);

  --community-regular-background: var(--community-light-background);
  --community-regular-text: var(--color-dark-text);

  --community-reverse-headings: var(--color-light-text);
  --community-reverse-background: var(--community-base);
  --community-reverse-text: var(--color-light-text);

  --community-hover-bg: #04ECBD;
  --community-active-bg: #03B18E;

  /* Alias je Scheme-Variante */
  --community-reverse-1-headings: var(--community-reverse-headings);
  --community-reverse-1-background: var(--community-reverse-background);
  --community-reverse-1-text: var(--community-reverse-text);

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

  --community-reverse-3-headings: var(--community-regular-headings);
  --community-reverse-3-background: var(--community-regular-background);
  --community-reverse-3-text: var(--community-regular-text);

  /* ==========================
     PARTNER (Brand, nicht partner-content)
     ========================== */
  --partner-base: #7D0068;

  --partner-regular-headings: var(--partner-base);
  /* Regular-Background = Light-Background */
  --partner-light-background: #F0E5EF;
  --partner-light-headings: var(--partner-base);
  --partner-light-text: var(--color-dark-text);

  --partner-regular-background: var(--partner-light-background);
  --partner-regular-text: var(--color-dark-text);

  --partner-reverse-headings: var(--color-light-text);
  --partner-reverse-background: var(--partner-base);
  --partner-reverse-text: var(--color-light-text);

  --partner-hover-bg: #A6008A;
  --partner-active-bg: #5B004C;

  /* Alias je Scheme-Variante */
  --partner-reverse-1-headings: var(--partner-reverse-headings);
  --partner-reverse-1-background: var(--partner-reverse-background);
  --partner-reverse-1-text: var(--partner-reverse-text);

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

  --partner-reverse-3-headings: var(--partner-reverse-2-headings);
  --partner-reverse-3-background: #f7f2f7;
  --partner-reverse-3-text: var(--partner-reverse-2-text);

  /* ==========================
     DOSSIER
     ========================== */
  --dossier-base: #FF5757;

  --dossier-regular-headings: var(--dossier-base);
  --dossier-regular-background: var(--color-light-bg);
  --dossier-regular-text: var(--color-dark-text);

  --dossier-reverse-headings: var(--color-light-text);
  --dossier-reverse-background: var(--dossier-base);
  --dossier-reverse-text: var(--color-light-text);

  --dossier-light-headings: var(--dossier-base);
  --dossier-light-background: #FFE1E1;
  --dossier-light-text: var(--color-dark-text);

  --dossier-hover-bg: #FF8787;
  --dossier-active-bg: #FF1E1E;

  /* ==========================
     SALTO.MUSIC
     ========================== */
  --music-base: #AF13FB;
  --music-secondary-base: #616971;

  --music-regular-headings: var(--music-base);
  --music-regular-background: var(--color-light-bg);
  --music-regular-text: var(--color-dark-text);

  --music-reverse-headings: var(--color-light-text);
  --music-reverse-background: var(--music-base);
  --music-reverse-text: var(--color-light-text);

  --music-light-headings: var(--music-base);
  --music-light-background: #F1D8FF;
  --music-light-text: var(--color-dark-text);

  --music-header-from: #C300C7;
  --music-header-to: #FF9900;

  --music-hover-bg: #AF13FB;
  --music-active-bg: #AF13FB;

  /* ==========================
     BREAKING / FLASH NEWS
     ========================== */
  --breaking-base: #FFB700;

  --breaking-regular-headings: var(--breaking-base);
  --breaking-regular-background: var(--color-light-bg);
  --breaking-regular-text: var(--color-dark-text);

  --breaking-reverse-headings: var(--color-light-text);
  --breaking-reverse-background: var(--breaking-base);
  --breaking-reverse-text: var(--color-light-text);

  --breaking-light-headings: var(--breaking-base);
  --breaking-light-background: #FFE9B3;
  --breaking-light-text: var(--color-dark-text);

  --flash-news-hover-bg: #FFCB49;
  --flash-news-active-bg: #DB9D00;

  /* ==========================
     ADS (allgemein)
     ========================== */
  --ads-base: #616971;

  --ads-regular-headings: var(--ads-base);
  /* Regular-Background = Light-Background */
  --ads-light-background: #E1E4E7;
  --ads-light-headings: var(--ads-base);
  --ads-light-text: var(--color-dark-text);

  --ads-regular-background: var(--ads-light-background);
  --ads-regular-text: var(--color-dark-text);

  --ads-reverse-headings: var(--color-light-text);
  --ads-reverse-background: var(--ads-base);
  --ads-reverse-text: var(--color-light-text);

  --ads-hover-bg: #747E88;
  --ads-active-bg: #525A61;

  /* ==========================
     DONATION & WEEKEND (Zusatz)
     ========================== */
  --donation-bg-1: #03CEA4;
  --donation-bg-2: #0D6EFD;
  --donation-bg-3: #7D0068;
  --donation-text: var(--color-light-text);

  --weekend-bg-1: #00C77F;
  --weekend-bg-2: #00D1FF;
  --weekend-text: var(--color-light-text);

  /* ==========================
     ARTICLE ROLES – sauber symmetrisch
     ========================== */
  /* editor */
  --editor-light-headings: var(--salto-light-headings);
  --editor-light-background: var(--salto-light-background);
  --editor-light-text: var(--salto-light-text);       /* dark text */

  --editor-regular-headings: var(--salto-regular-headings);
  --editor-regular-background: var(--editor-light-background); /* Regular nutzt Light-BG */
  --editor-regular-text: var(--color-dark-text);

  --editor-reverse-headings: var(--salto-reverse-headings);
  --editor-reverse-background: var(--salto-reverse-background);
  --editor-reverse-text: var(--color-light-text);     /* „salto-light“ */

  --editor-reverse-1-headings: var(--editor-reverse-headings);
  --editor-reverse-1-background: var(--editor-reverse-background);
  --editor-reverse-1-text: var(--editor-reverse-text);
  --editor-reverse-2-headings: var(--editor-light-headings);
  --editor-reverse-2-background: var(--editor-light-background);
  --editor-reverse-2-text: var(--editor-light-text);
  --editor-reverse-3-headings: var(--editor-regular-headings);
  --editor-reverse-3-background: var(--editor-regular-background);
  --editor-reverse-3-text: var(--editor-regular-text);

  /* columnist – eigenes Light-Schema, aber Werte wie Salto-Light */
  --columnist-light-headings: var(--salto-light-headings);
  --columnist-light-background: var(--salto-light-background);
  --columnist-light-text: var(--salto-light-text);

  --columnist-regular-headings: var(--salto-regular-headings);
  --columnist-regular-background: var(--columnist-light-background); /* Regular = Light-BG */
  --columnist-regular-text: var(--color-dark-text);

  --columnist-reverse-headings: var(--salto-reverse-headings);
  --columnist-reverse-background: var(--salto-reverse-background);
  --columnist-reverse-text: var(--color-light-text);

  --columnist-reverse-1-headings: var(--columnist-reverse-headings);
  --columnist-reverse-1-background: var(--columnist-reverse-background);
  --columnist-reverse-1-text: var(--columnist-reverse-text);
  --columnist-reverse-2-headings: var(--columnist-light-headings);
  --columnist-reverse-2-background: var(--columnist-light-background);
  --columnist-reverse-2-text: var(--columnist-light-text);
  --columnist-reverse-3-headings: var(--columnist-regular-headings);
  --columnist-reverse-3-background: var(--columnist-regular-background);
  --columnist-reverse-3-text: var(--columnist-regular-text);

  /* community (Artikelrolle) */
  --community-article-regular-headings: var(--community-regular-headings);
  --community-article-regular-background: var(--community-light-background); /* Regular = Light */
  --community-article-regular-text: var(--color-dark-text);

  --community-article-reverse-1-headings: var(--community-reverse-headings);
  --community-article-reverse-1-background: var(--community-reverse-background);
  --community-article-reverse-1-text: var(--color-light-text);

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

  --community-article-reverse-3-headings: var(--community-regular-headings);
  --community-article-reverse-3-background: var(--community-regular-background);
  --community-article-reverse-3-text: var(--community-regular-text);

  /* external */
  --external-light-headings: var(--salto-light-headings);
  --external-light-background: var(--salto-light-background);
  --external-light-text: var(--salto-light-text);

  --external-regular-headings: var(--salto-regular-headings);
  --external-regular-background: var(--external-light-background); /* Regular = Light-BG */
  --external-regular-text: var(--color-dark-text);

  --external-reverse-headings: var(--salto-reverse-headings);
  --external-reverse-background: var(--salto-reverse-background);
  --external-reverse-text: var(--color-light-text);

  --external-reverse-1-headings: var(--external-reverse-headings);
  --external-reverse-1-background: var(--external-reverse-background);
  --external-reverse-1-text: var(--external-reverse-text);
  --external-reverse-2-headings: var(--external-light-headings);
  --external-reverse-2-background: var(--external-light-background);
  --external-reverse-2-text: var(--external-light-text);
  --external-reverse-3-headings: var(--external-regular-headings);
  --external-reverse-3-background: var(--external-regular-background);
  --external-reverse-3-text: var(--external-regular-text);

  /* partner-content (Artikelrolle) */
  --partner-content-light-headings: #7D0068;
  --partner-content-light-background: #F0E5EF;
  --partner-content-light-text: var(--color-dark-text);

  --partner-content-regular-headings: #7D0068;
  --partner-content-regular-background: var(--partner-content-light-background); /* Regular = Light */
  --partner-content-regular-text: var(--color-dark-text);

  --partner-content-reverse-headings: var(--color-light-text);
  --partner-content-reverse-background: #7D0068;
  --partner-content-reverse-text: var(--color-light-text);

  --partner-content-reverse-1-headings: var(--partner-content-reverse-headings);
  --partner-content-reverse-1-background: var(--partner-content-reverse-background);
  --partner-content-reverse-1-text: var(--partner-content-reverse-text);
  --partner-content-reverse-2-headings: var(--partner-content-light-headings);
  --partner-content-reverse-2-background: var(--partner-content-light-background);
  --partner-content-reverse-2-text: var(--partner-content-light-text);
  --partner-content-reverse-3-headings: var(--partner-content-regular-headings);
  --partner-content-reverse-3-background: var(--partner-content-regular-background);
  --partner-content-reverse-3-text: var(--partner-content-regular-text);

  /* partner-plus-content (Artikelrolle) */
  --partner-plus-content-light-headings: #7D0068;
  --partner-plus-content-light-background: #F0E5EF;
  --partner-plus-content-light-text: var(--color-dark-text);

  --partner-plus-content-regular-headings: #7D0068;
  --partner-plus-content-regular-background: var(--partner-plus-content-light-background);
  --partner-plus-content-regular-text: var(--color-dark-text);

  --partner-plus-content-reverse-headings: var(--color-light-text);
  --partner-plus-content-reverse-background: #7D0068;
  --partner-plus-content-reverse-text: var(--color-light-text);

  --partner-plus-content-reverse-1-headings: var(--partner-plus-content-reverse-headings);
  --partner-plus-content-reverse-1-background: var(--partner-plus-content-reverse-background);
  --partner-plus-content-reverse-1-text: var(--partner-plus-content-reverse-text);
  --partner-plus-content-reverse-2-headings: var(--partner-plus-content-light-headings);
  --partner-plus-content-reverse-2-background: var(--partner-plus-content-light-background);
  --partner-plus-content-reverse-2-text: var(--partner-plus-content-light-text);
  --partner-plus-content-reverse-3-headings: var(--partner-plus-content-regular-headings);
  --partner-plus-content-reverse-3-background: var(--partner-plus-content-regular-background);
  --partner-plus-content-reverse-3-text: var(--partner-plus-content-regular-text);

  /* advertorial (Artikelrolle, „Ad“) */
  --advertorial-base: #616971;

  --advertorial-light-headings: var(--advertorial-base);
  --advertorial-light-background: #D5F4ED;
  --advertorial-light-text: var(--color-dark-text);

  --advertorial-regular-headings: var(--advertorial-base);
  --advertorial-regular-background: var(--advertorial-light-background); /* Regular = Light */
  --advertorial-regular-text: var(--color-dark-text);

  --advertorial-reverse-headings: var(--color-light-text);
  --advertorial-reverse-background: var(--advertorial-base);
  --advertorial-reverse-text: var(--color-light-text);

  --advertorial-reverse-1-headings: var(--advertorial-reverse-headings);
  --advertorial-reverse-1-background: var(--advertorial-reverse-background);
  --advertorial-reverse-1-text: var(--advertorial-reverse-text);
  --advertorial-reverse-2-headings: var(--advertorial-light-headings);
  --advertorial-reverse-2-background: var(--advertorial-light-background);
  --advertorial-reverse-2-text: var(--advertorial-light-text);
  --advertorial-reverse-3-headings: var(--advertorial-regular-headings);
  --advertorial-reverse-3-background: var(--advertorial-regular-background);
  --advertorial-reverse-3-text: var(--advertorial-regular-text);

  /* ==========================
     Status-Farben (Bootstrap-nah)
     ========================== */
  --state-danger-bg: #DC3545;
  --state-danger-hover-bg: #E35D6A;
  --state-danger-active-bg: #B02A37;
  --state-danger-text: var(--color-light-text);

  --state-warning-bg: #FFC107;
  --state-warning-hover-bg: #FFCD39;
  --state-warning-active-bg: #CC9A06;
  --state-warning-text: var(--color-light-text);

  --state-success-bg: #198754;
  --state-success-hover-bg: #479F76;
  --state-success-active-bg: #146C43;
  --state-success-text: var(--color-light-text);

  --state-info-bg: #0DCAF0;
  --state-info-hover-bg: #3DD5F3;
  --state-info-active-bg: #0AA2C0;
  --state-info-text: var(--color-light-text);

  --state-dark-bg: #212529;
  --state-dark-hover-bg: #212529;
  --state-dark-active-bg: #212529;
  --state-dark-text: var(--color-light-text);

  /* Disabled */
  --state-disabled-bg: #CACACA;
  --state-disabled-text: var(--color-dark-text);
  --state-disabled-secondary-bg: var(--color-light-bg);
  --state-disabled-secondary-border: #CACACA;
}

/* Fonts */
:root {
  --salto-font-serif: "source serif pro", serif;
  --salto-font-sans: "source sans pro", sans-serif;
  --salto-font-music: "mayenne sans", sans-serif;
}

/* Legacy additions */
/* There are 3 color scheme variants for each article role color set: regular, reverse, light
   There are 3 elements per scheme/article role: headings (and links etc.), background, text
   In the CSS we define classes like .salto-regular or .salto-reverse which contain already all variants
 */
:root {
  --salto-regular-headings: #0D6EFD;
  --salto-regular-background: #ffffff;
  --salto-regular-text: #212529;

  --salto-reverse-headings: #ffffff;
  --salto-reverse-background: #0D6EFD;
  --salto-reverse-text: #ffffff;

  --salto-light-headings: #0D6EFD;
  --salto-light-background: #E8F0FE;
  --salto-light-text: #212529;

  --editor-regular-headings: #0D6EFD;
  --editor-regular-background: #ffffff;
  --editor-regular-text: #212529;

  --editor-reverse-headings: #ffffff;
  --editor-reverse-background: #0D6EFD;
  --editor-reverse-text: #ffffff;

  --editor-light-headings: #0D6EFD;
  --editor-light-background: #E8F0FE;
  --editor-light-text: #212529;

  --columnist-regular-headings: #0D6EFD;
  --columnist-regular-background: #ffffff;
  --columnist-regular-text: #212529;

  --columnist-reverse-headings: #ffffff;
  --columnist-reverse-background: #0D6EFD;
  --columnist-reverse-text: #ffffff;

  --columnist-light-headings: #0D6EFD;
  --columnist-light-background: #E8F0FE;
  --columnist-light-text: #212529;

  --external-regular-headings: #0D6EFD;
  --external-regular-background: #ffffff;
  --external-regular-text: #212529;

  --external-reverse-headings: #ffffff;
  --external-reverse-background: #0D6EFD;
  --external-reverse-text: #ffffff;

  --light-external-headings: #0D6EFD;
  --light-external-background: #E8F0FE;
  --light-external-text: #212529;

  --community-regular-headings: #03cea4;
  --community-regular-background: #ffffff;
  --community-regular-text: #212529;

  --community-reverse-headings: #ffffff;
  --community-reverse-background: #03cea4;
  --community-reverse-text: #ffffff;

  --community-light-headings: #03cea4;
  --community-light-background: #D5F4ED;
  --community-light-text: #212529;

  --advertorial-regular-headings: #616971;
  --advertorial-regular-background: #ffffff;
  --advertorial-regular-text: #212529;

  --advertorial-reverse-headings: #ffffff;
  --advertorial-reverse-background: #616971;
  --advertorial-reverse-text: #ffffff;

  --advertorial-light-headings: #616971;
  --advertorial-light-background: #D5F4ED;
  --advertorial-light-text: #616971;
}

/* Set Salto Fonts */
:root {
  --salto-font-serif: "source serif pro", serif;
  --salto-font-sans: "source sans pro", sans-serif;
  --salto-font-music: "mayenne sans", sans-serif;
}