/* Farben, Typografie, Abstände, Winkel — nur Custom Properties. */
:root {
  /* Farbwelt, exakt nach Design Manual v3.4 */
  --c-blue:     #05164D;
  --c-cream:    #F6F2EB;
  --c-white:    #FFFFFF;
  --c-ice:      #DCDFEA;
  --c-dove:     #BEC2D6;
  --c-violet:   #7267A1;
  --c-lavender: #B4A7D0;
  --c-sage:     #96B39E;
  --c-coral:    #EE7568;

  /* Ton-in-Ton-Varianten für die Löwin auf farbigem Grund, abgenommen von
     Seite 9 des Manuals ("Löwin auf Farbe"). Ausschließlich hierfür, nie als
     Flächenfarbe. Auf Lavendel steht sie in Violett, auf Eisblau in
     Taubenblau -- dort sind es Palettenfarben. (Bis 2026-09-24 standen hier
     geschätzte Werte, die vom Manual abwichen.) */
  --c-sage-deep:     #557A6E;
  --c-lavender-deep: var(--c-violet);
  --c-coral-deep:    #A73E31;
  --c-ice-deep:      var(--c-dove);
  --c-dove-deep:     #68769B;

  /* Schriftfamilien */
  --f-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --f-text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Typo-Skala, fluid */
  --t-h1:      clamp(2.75rem, 6.5vw, 5.5rem);
  --t-h2:      clamp(2rem, 4vw, 3.25rem);
  --t-h3:      clamp(1.25rem, 1.6vw, 1.5rem);
  --t-lead:    clamp(1.125rem, 1.6vw, 1.375rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-eyebrow: 0.8125rem;

  /* Abstandsskala, 8-px-Basis */
  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;  --s-4:  1rem;
  --s-5:  1.5rem;   --s-6:  2rem;     --s-7:  3rem;     --s-8:  4rem;
  --s-9:  6rem;     --s-10: 8rem;     --s-11: 10rem;

  /* Winkel des Schrägschnitts (4.2), aus Seite 10 des Design-Manuals
     nachgemessen: Die Violettfläche läuft dort von x = 361,6 an der
     Oberkante nach x = 117,8 an der Unterkante bei 841 Einheiten Höhe --
     atan(243.8 / 841) ≈ 16,2° zur Vertikalen. Einzige Anwendung: die
     Klasse .schraegschnitt im Abschnitt "Ausgangslage". */
  --cut-angle: 16.2deg;

  /* Raster */
  --page-max:  1280px;
  --gutter:    1.5rem;
  --pad-x:     1.5rem;
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* Fokus */
  --focus-ring: 3px;
}

@media (min-width: 768px)  { :root { --pad-x: 3rem; } }
@media (min-width: 1280px) { :root { --pad-x: 4rem; } }