/* Shared Haktan tokens and local font, extracted unchanged from the homepage. */
:root {
  /* Anthrazit, aber tief und lackiert: dunklere Basis, deutlichere Stufung,
     Lichtkanten auf den Flaechen. */
  --navy-900: oklch(0.175 0.004 260);
  --navy-800: oklch(0.225 0.004 260);
  --navy-700: oklch(0.30 0.005 260);
  --gender-f: oklch(0.72 0.19 350);   /* Rosa - hebt sich vom Rot des Panels ab */
  --gender-m: oklch(0.72 0.15 240);   /* Blau, gleiche Helligkeitsklasse */
  /* Rot als Akzent des Heros. --red-bright statt --red-primary fuer Text:
     #E31B23 kommt auf dem dunklen Grund nur auf 4.0:1, #FF2A33 auf 5.0:1. */
  --red-primary: #e31b23;
  --red-bright:  #ff2a33;
  --border-red:  rgba(227, 27, 35, .35);
  /* Status-Gruen fuer den Verfuegbarkeits-Punkt: klar vom Rot des Heros
     getrennt, gleiche Helligkeitsklasse wie --red-bright. */
  --live-green:  oklch(0.80 0.19 150);
  --ink:      #f5f5f3;
  --ink-mid:  #d4d4d1;
  --ink-low:  #8d8d91;
  --hair:     oklch(1 0 0 / 0.13);
  --hair-soft:oklch(1 0 0 / 0.07);

  /* spacing scale — 4px base, non-linear on purpose */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1.125rem;
  --s5: 1.75rem; --s6: 2.75rem; --s7: 4.25rem; --s8: 6.5rem;

  --r-sm: 6px; --r-md: 12px; --r-lg: 16px;
  --shell: 76rem;

  /* Hero-Hoehe und Topbar-Hoehe an einer Stelle: die Buehne endet exakt
     am Hero-Ende, sonst laeuft das Bild hinter die About-Sektion. */
  --hero-h:   clamp(700px, 74vh, 50rem);
  --topbar-h: 7.625rem;   /* gemessener Abstand bis zur Hero-Oberkante */

  --font: "Chivo", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@font-face {
  font-family: "Chivo";
  src: url("/fonts/chivo-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}