/* ==========================================================================
   Melanie Kranz · Pferde- & Hundetherapie
   DESIGN-TOKENS – die einzige Quelle für Farben, Schrift, Abstände.
   Diese Datei wird von Website UND Druckvorlagen eingebunden.
   Schriften werden lokal ausgeliefert (kein Google, kein CDN).
   ========================================================================== */

/* ---------- Schrift: Selawik (freier, metrisch gleicher Ersatz für Segoe UI) ----------
   Pfade relativ zu dieser CSS-Datei: ../fonts/                                         */
@font-face { font-family: "Selawik"; src: url("../fonts/Selawik-Light.woff2") format("woff2"), url("../fonts/Selawik-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Selawik"; src: url("../fonts/Selawik-Semilight.woff2") format("woff2"), url("../fonts/Selawik-Semilight.woff") format("woff"); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: "Selawik"; src: url("../fonts/Selawik-Regular.woff2") format("woff2"), url("../fonts/Selawik-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Selawik"; src: url("../fonts/Selawik-Semibold.woff2") format("woff2"), url("../fonts/Selawik-Semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Selawik"; src: url("../fonts/Selawik-Bold.woff2") format("woff2"), url("../fonts/Selawik-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- Markenfarben (aus dem Logo gemessen) ---------- */
  --mk-oliv:        #737B08;  /* Linien Pferd & Hund, „Pferde- & Hundetherapie“ */
  --mk-oliv-dunkel: #4B5005;  /* Augen, Nüstern, Nase */
  --mk-gold:        #FBBC04;  /* Sterne, Trennlinie */
  --mk-anthrazit:   #292728;  /* „Melanie Kranz“, Unterzeile */

  /* ---------- Oliv-Skala ---------- */
  --oliv-50:  #F7F8EC;
  --oliv-100: #EEF0D4;
  --oliv-200: #DCE0A8;
  --oliv-300: #C2C96F;
  --oliv-400: #9CA531;
  --oliv-500: #737B08;   /* = Markenfarbe */
  --oliv-600: #5F6606;
  --oliv-700: #4B5005;   /* = Oliv dunkel */
  --oliv-800: #383C05;
  --oliv-900: #252804;

  /* ---------- Gold-Skala ---------- */
  --gold-50:  #FFF8E1;
  --gold-100: #FEEDB3;
  --gold-300: #FDD45C;
  --gold-500: #FBBC04;   /* = Markenfarbe */
  --gold-700: #8A6500;   /* nur für Text auf hellem Grund (Kontrast ≥ 4.5:1) */

  /* ---------- Neutrale, leicht warme Töne ---------- */
  --stein-0:   #FFFFFF;
  --stein-50:  #FAF9F5;  /* Papier / Seitenhintergrund */
  --stein-100: #F2F0E9;  /* Flächen, Karten */
  --stein-200: #E3E0D6;  /* Linien */
  --stein-300: #C9C5B9;
  --stein-500: #7D7972;  /* gedämpfter Text */
  --stein-700: #4D4A47;
  --stein-900: #292728;  /* = Anthrazit */

  /* ---------- Signalfarben (sparsam!) ---------- */
  --signal-rot:   #B3261E;   /* Warnung / „unbedingt beachten“ */
  --signal-rot-hell: #FBEAE8;
  --signal-gruen: #3F7D3A;   /* Erfolg, z. B. Formular gesendet */

  /* ---------- Semantische Rollen (diese im Code verwenden) ---------- */
  --farbe-hintergrund:   var(--stein-50);
  --farbe-flaeche:       var(--stein-0);
  --farbe-flaeche-ruhig: var(--oliv-50);
  --farbe-text:          var(--stein-900);
  --farbe-text-leise:    var(--stein-500);
  --farbe-linie:         var(--stein-200);
  --farbe-primaer:       var(--oliv-500);
  --farbe-primaer-hover: var(--oliv-700);
  --farbe-akzent:        var(--gold-500);
  --farbe-ueberschrift:  var(--oliv-500);
  --farbe-link:          var(--oliv-600);
  --farbe-fokus:         var(--gold-500);

  /* ---------- Typografie ---------- */
  --schrift:      "Selawik", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gewicht-leicht:  300;
  --gewicht-halbleicht: 350;
  --gewicht-normal:  400;
  --gewicht-halbfett: 600;
  --gewicht-fett:    700;

  /* Fließende Größen (Website). Druck nutzt pt-Werte in print.css */
  --text-xs:   0.8125rem;                              /* 13px */
  --text-s:    0.9375rem;                              /* 15px */
  --text-m:    1.0625rem;                              /* 17px – Fließtext */
  --text-l:    clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  --text-xl:   clamp(1.5rem, 1.3rem + .9vw, 2rem);      /* H3 */
  --text-2xl:  clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);/* H2 */
  --text-3xl:  clamp(2.375rem, 1.8rem + 2.8vw, 4rem);   /* H1 */
  --zeilenhoehe: 1.6;
  --zeilenhoehe-eng: 1.15;
  --sperrung-label: 0.08em;   /* für VERSALIEN-Labels */

  /* ---------- Abstände (8er-Raster) ---------- */
  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 0.75rem;
  --abstand-4: 1rem;
  --abstand-5: 1.5rem;
  --abstand-6: 2rem;
  --abstand-7: 3rem;
  --abstand-8: 4.5rem;
  --abstand-9: 6.5rem;

  /* ---------- Form ---------- */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 22px;
  --radius-rund: 999px;
  --linie-stark: 2px;
  --schatten-s: 0 1px 2px rgb(41 39 40 / .06), 0 1px 3px rgb(41 39 40 / .08);
  --schatten-m: 0 4px 14px rgb(41 39 40 / .08), 0 1px 3px rgb(41 39 40 / .06);

  /* ---------- Layout ---------- */
  --breite-inhalt: 72rem;     /* 1152px */
  --breite-text:   40rem;     /* angenehme Lesebreite */
  --rand-seite:    clamp(1rem, 4vw, 2.5rem);
}