/* ==========================================================================
   Design-Tokens – Palette „Beton, Petrol & Himbeer“
   Alle Farben, Schriften und Abstände der Seite stehen NUR hier.
   Komponenten in site.css benutzen ausschließlich diese Variablen.
   ========================================================================== */

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Flächen (Beton) */
  --c-bg: #edece9;          /* Seitenhintergrund */
  --c-bg-alt: #e2e0dc;      /* abwechselnde Abschnitte */
  --c-surface: #fafaf8;     /* Karten, Fenster */
  --c-line: #d2cfc9;        /* Rahmen, Trennlinien */
  --c-line-strong: #b3afa8; /* Rahmen von Buttons */

  /* Text (Graphit) */
  --c-ink: #1b1e20;         /* Überschriften, starker Text */
  --c-text: #3e4245;        /* Fließtext */
  --c-muted: #5a5e62;       /* Nebeninfos, Prompts */

  /* Akzente */
  --c-petrol: #0f6e7a;
  --c-petrol-dark: #0a535c;
  --c-himbeer: #c2185b;
  --c-himbeer-glow: rgb(194 24 91 / 0.4);
  --c-himbeer-strong: #ad1552; /* für kleine Schrift auf --c-bg-alt (Kontrast ≥ 4.5) */

  /* Code-Fenster (dunkel) */
  --c-code-bg: #1b1e20;
  --c-code-line: #33373a;
  --c-code-text: #dadcd8;
  --c-code-muted: #8a8f92;
  --c-code-accent: #f07ba3;
  --c-code-string: #7fd1da;

  /* Schriften */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Schriftgrößen (passen sich der Bildschirmbreite an) */
  --fs-hero: clamp(1.75rem, 8.4vw, 7.75rem);
  --fs-h2: clamp(1.75rem, 4.2vw, 3.75rem);
  --fs-h2-xl: clamp(2.125rem, 6vw, 6rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.125rem, 1.6vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.8125rem;

  /* Abstände */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-section: clamp(4rem, 8vw, 6.5rem);
  --gutter: clamp(1rem, 3vw, 2rem);
  --max-width: 80rem;

  /* Rundungen */
  --radius-s: 0.75rem;
  --radius-m: 1.25rem;
  --radius-sheet: clamp(1.5rem, 3vw, 2.5rem);

  /* Bewegung */
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-spring: cubic-bezier(0.3, 1.4, 0.5, 1);
}