/* ==========================================================================
   Design Tokens
   Einzige Quelle für Farben, Schrift, Abstände, Radien und Bewegung.
   Werte stammen aus dem Figma-Make-Entwurf.
   ========================================================================== */

:root {
  /* Farben */
  --color-white: #fff;
  --color-black: #000;
  --color-ink: #0c0f14;
  --color-text-muted: #5d6574;
  --color-text-subtle: #939393;
  --color-surface: #f8f8f8;
  --color-border: #f3f3f3;
  --color-border-strong: #dcdcdc;
  --color-border-dark: #323232;
  --color-accent-red: #fe2525;
  --color-accent-blue: #0c1cfb;
  --color-nav-bg: rgb(255 255 255 / 0.7);
  --color-scrim: rgb(0 0 0 / 0.4);

  /* Schriften */
  --font-display: "Google Sans Flex", "Helvetica Neue", Arial, sans-serif;
  --font-pixel: "Pixelify Sans", ui-monospace, "SF Mono", Menlo, monospace;

  /* Schriftgrößen (fließend zwischen 375 px und 1200 px Viewport-Breite) */
  --fs-hero: clamp(1.8125rem, 1.046rem + 3.273vw, 3.5rem);   /* 29 → 56 px */
  --fs-h2: clamp(3.25rem, 2.99rem + 1.09vw, 3.8125rem);      /* 52 → 61 px */
  --fs-work-company: clamp(1.125rem, 0.954rem + 0.727vw, 1.5rem); /* 18 → 24 px */
  --fs-work-title: clamp(1rem, 0.7725rem + 0.97vw, 1.5rem);  /* 16 → 24 px */
  --fs-body: 1rem;
  --fs-pill-marquee: 1.625rem;                               /* 26 px */

  /* Abstände (Zahl = Pixel bei 16 px Basis) */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-44: 2.75rem;
  --space-52: 3.25rem;

  /* Radien */
  --radius-s: 0.5rem;
  --radius-pill: 6.375rem;
  --radius-sheet: 1.25rem;

  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --dur-marquee: 18s;

  /* Layout: seitlicher Rand fließt von 24 px (Handy) bis 120 px (Desktop) */
  --page-pad: clamp(1.5rem, 11.64vw - 1.225rem, 7.5rem);
  --nav-h: 4rem;
}

@media (min-width: 48em) {
  :root {
    --nav-h: 4.8125rem; /* 77 px */
  }
}