/* =========================================================
   Mama Sekunde - Variables
   Datei: assets/_ms-variables.css
   ========================================================= */

:root {
  --ms-color-white: #ffffff;
  --ms-color-creme: #ffffff;
  --ms-color-beige: #ffffff;
  --ms-color-gray: #e1e3e6;
  --ms-color-blue: #dcecf7;
  --ms-color-yellow: #f9f5bf;
  --ms-color-toffee: #8b9b84;
  --ms-color-green: #cfd9c9;
  --ms-color-green-dark: #8b9b84;
  --ms-color-text: #222;
  --ms-color-text-soft: #444;

  /* Schriftfarbe der Sektions-Überschriften. Eigenes Token, weil
     die Überschrift die einzige Schrift ist, die farbig sein
     darf: Sie ist groß genug, dass 3:1 reicht, Fließtext braucht
     4,5:1. Ohne Palette dieselbe Farbe wie der übrige Text.
     Gesetzt wird sie in `_ms-palettes.css`. */
  --ms-color-heading: var(--ms-color-text);

  /* Farbe für kleine dekorative Akzente — Punkte, gepunktete
     Linien. Eigenes Token, weil es eine Rolle ist, die keine der
     übrigen Farben trägt: eine Farbe, die nur in winzigen
     Flächen vorkommt und nie Text einfärbt. Ohne Palette läuft
     sie auf dem Grün mit, damit sich nichts ändert. Gesetzt wird
     sie in `_ms-palettes.css`. */
  --ms-color-rose: var(--ms-color-green);

  /* Schriftfarbe auf dem Primary-Button. Steckt in einem eigenen
     Token, weil sie von der Button-Farbe abhängt: Auf dunklen
     CTAs weiß, auf hellen dunkel. Paletten mit hellem CTA
     überschreiben sie in `_ms-palettes.css`. */
  --ms-color-cta-text: var(--ms-color-white);

  /* Die drei Sektionsflächen. Greifen nur, wenn eine Palette
     aktiv ist — welche Sektion welche bekommt, steht in
     `_ms-palettes.css` im Abschnitt „Flächen-Rhythmus". Hier
     als Fallback, damit die Rollen auch ohne Palette definiert
     sind. */
  --ms-surface-page: #ffffff;
  --ms-surface-soft: var(--ms-color-creme);
  --ms-surface-accent: var(--ms-color-blue);

  --ms-font-body: "Inter", sans-serif;
  --ms-font-heading: "Poppins", sans-serif;
  --ms-font-script: "Caveat", cursive;

  --ms-font-size-h1: 6rem;
  --ms-font-size-h2: 5.2rem;
  --ms-font-size-h3: 3.8rem;
  --ms-font-size-h4: 2.3rem;
  --ms-font-size-h5: 1.8rem;
  --ms-font-size-h6: 1.3rem;
  --ms-font-size-body: 1.6rem;
  --ms-font-size-small: 1.14rem;
  --ms-line-height-heading: 1.15;
  --ms-line-height-body: 1.65;
}

@media screen and (max-width: 749px) {
  :root {
    --ms-font-size-h1: 4rem;
    --ms-font-size-h2: 3.2rem;
    --ms-font-size-h3: 2.6rem;
    --ms-font-size-h4: 2.1rem;
    --ms-font-size-h5: 1.7rem;
    --ms-font-size-h6: 1.4rem;
    --ms-font-size-body: 1.5rem;
  }
}