/*
  Design-Tokens als Custom Properties. Quelle: docs/design/tokens.md
  (aus Figma extrahiert, Farben/Motion sind Annahmen -- siehe dortige Hinweise).
*/

:root {
  /* Typografie -- Basis 1440px Desktop, fluid via clamp() da kein Mobile-Design vorliegt */
  --font-family-display: "Ulm Grotesk", "Arial Black", sans-serif;
  --font-family-mono: "Söhne Mono", "Courier New", monospace;

  --font-h1: 800 clamp(2.5rem, 1.6rem + 5vw, 7rem) / 0.96 var(--font-family-display);
  --font-h2: 800 clamp(2rem, 1.5rem + 2.2vw, 3.875rem) / 1.133 var(--font-family-display);
  --font-h3: 800 clamp(1.75rem, 1.3rem + 2vw, 5.3125rem) / 0.97 var(--font-family-display);
  --font-h4: 800 clamp(1.25rem, 1.1rem + 0.8vw, 2.95rem) / 1 var(--font-family-display);
  --font-text-big: 400 clamp(1.5rem, 2vw, 2.5rem) / 2.5 var(--font-family-mono);
  --font-text: 400 clamp(0.9375rem, 0.9rem + 0.2vw, 1.25rem) / 1.5 var(--font-family-mono);
  --font-nav: 400 1rem / normal var(--font-family-mono);
  --letter-spacing-h1: -0.04em;
  --letter-spacing-h2: -0.01em;
  --letter-spacing-nav: 0.15em;
  --letter-spacing-btn: 0.1em;

  /* Farben -- als Rohwerte im Design vorgefunden, hier benannt (siehe tokens.md) */
  --color-bg-light: #e8e8e8;
  --color-bg-dark: #000000;
  --color-surface-dark: #000;
  /* Ein Orange statt zwei -- --color-accent-2 (#ff6000) war das
     eigentlich korrekte Markenorange, --color-accent (#e84e0f, dunkler)
     wurde aber an den meisten Stellen verwendet, dadurch liefen zwei
     leicht unterschiedliche Orangetoene nebeneinander her. Jetzt ein
     Token, alle vorherigen --color-accent-2-Stellen zeigen jetzt hierher. */
  --color-accent: #ff6000;
  --color-accent-contrast: #ffffff;
  --color-text-on-light: #000;
  --color-text-on-dark: #f2f2f2;
  --color-border-on-light: rgb(30 30 30 / 15%);
  --color-border-on-dark: rgb(255 255 255 / 15%);

  /* Form */
  --radius-pill: 53px;
  --radius-card: 4px;

  /* Spacing-Skala */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --gutter: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  --container-max: 1440px;
  --menu-h: 86px;

  /* Motion -- frei definiert, keine Figma-Prototype-Daten vorhanden (siehe tokens.md) */
  --dur-fast: 200ms;
  --dur-base: 500ms;
  --dur-slow: 900ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
  --anim-distance: 32px;
}