/* Brücke zum Hof Steen Designsystem (design/tokens.css).
   Die Website-CSS nutzt diese Namen, die Werte kommen aus dem Designsystem. */
@import url("../design/tokens.css");

:root {
  --farbe-hintergrund: var(--creme);
  --farbe-flaeche: var(--creme);
  --farbe-flaeche-dunkel: var(--oliv-900);
  --farbe-text: var(--ink);
  --farbe-text-leise: var(--ink-muted);
  --farbe-text-hell: var(--on-oliv);
  --farbe-marke: var(--oliv-700);
  --farbe-marke-text: var(--on-oliv);
  --farbe-akzent: var(--abendrot);
  --farbe-akzent-dunkel: var(--abendrot-700);
  --farbe-akzent-text: var(--on-abendrot);
  --farbe-akzent-hell: var(--aprikose);
  --farbe-herz: var(--abendrot);
  --farbe-herz-leer: var(--aprikose);
  --farbe-rand: var(--hairline);
  --farbe-hinweis: var(--weizen-100);
  --farbe-kicker: var(--erde-600);
  --farbe-fokus: var(--focus);

  --flaeche-natur: var(--oliv-100);
  --flaeche-paten: var(--aprikose);
  --flaeche-info: var(--weizen-100);

  --schrift-text: var(--font-sans);
  --schrift-titel: var(--font-display);

  --abstand-1: var(--space-1);
  --abstand-2: var(--space-2);
  --abstand-3: var(--space-4);
  --abstand-4: var(--space-6);
  --abstand-5: var(--space-8);
  --abstand-6: var(--space-24);

  --radius: var(--radius-md);
  --radius-gross: var(--radius-lg);
  --radius-knopf: var(--radius-pill);
  --schatten: var(--shadow-card);
  --inhalt-breite: 100%;
  --rand: 20px;
  --logo-hoehe: 48px;
  --kopf-hoehe: 81px;
}

/* Vier Breakpoints:
   Mobil     bis 47.99rem  (unter 768 px)
   Tablet    ab 48rem      (768 px)
   Laptop    ab 64rem      (1024 px)
   Groß      ab 90rem      (1440 px)
   Media Queries können keine Variablen nutzen, darum stehen die Werte direkt im CSS. */
@media (max-width: 47.99rem) {
  :root { --abstand-6: var(--space-12); }
}
@media (min-width: 48rem) {
  :root { --rand: 32px; --logo-hoehe: 64px; --kopf-hoehe: 97px; --abstand-6: 72px; }
}
@media (min-width: 64rem) {
  :root { --inhalt-breite: 80rem; --rand: 40px; --logo-hoehe: 72px; --kopf-hoehe: 105px; --abstand-6: var(--space-24); }
}
@media (min-width: 90rem) {
  :root { --inhalt-breite: 96rem; --rand: 56px; --logo-hoehe: 84px; --kopf-hoehe: 117px; --abstand-6: 120px; }
}