/*
  Design-Tokens – JR Events
  Farben aus dem offiziellen CI (Logo_Eckdaten.txt / Visitenkarte):
  Vermillion #E34234, Glaucous #6082B6, Slate Gray #708090.
*/
:root {
  /* Brand */
  --color-vermillion: #e34234;
  --color-vermillion-light: #ff6b57;
  --color-glaucous: #6082b6;
  --color-glaucous-light: #86a6d6;
  --color-slate: #708090;
  --color-ton: #a8608f; /* dritter Kategorie-Akzent, aus der Kernpalette abgeleitet (zwischen Vermillion & Glaucous) */
  /* 3-Stopp-Verlauf über --color-ton statt direkt Rot->Blau: eine direkte
     Interpolation zwischen Vermillion und Glaucous würde im sRGB-Raum durch
     einen matschigen Grauton in der Mitte laufen. Der Zwischenstopp hält den
     Verlauf auf beiden Teilstrecken in verwandten, satten Tönen. */
  --gradient-brand: linear-gradient(135deg, var(--color-vermillion) 0%, var(--color-ton) 50%, var(--color-glaucous) 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(227, 66, 52, 0.16) 0%, rgba(168, 96, 143, 0.14) 50%, rgba(96, 130, 182, 0.16) 100%);
  --gradient-sheen: radial-gradient(140% 180% at 18% -30%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 55%);

  /* Surfaces (dunkles Theme, angelehnt an Visitenkarten-Vorderseite) */
  --color-bg: #0a0a0b;
  --color-bg-elevated: #131315;
  --color-surface: #1a1a1c;
  --color-surface-hover: #212124;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --color-text: #f4f4f3;
  --color-text-muted: #a6a6ac;
  --color-text-faint: #8a8a91; /* WCAG AA (4.5:1) gegen alle drei Oberflächen-Töne geprüft */
  --color-on-brand: #ffffff;

  /* Typografie */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --fs-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);
  --fs-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --fs-base: clamp(1rem, 0.97rem + 0.2vw, 1.1rem);
  --fs-lg: clamp(1.15rem, 1.1rem + 0.3vw, 1.35rem);
  --fs-xl: clamp(1.4rem, 1.3rem + 0.6vw, 1.75rem);
  --fs-2xl: clamp(1.8rem, 1.6rem + 1vw, 2.4rem);
  --fs-3xl: clamp(2.2rem, 1.9rem + 1.6vw, 3.2rem);
  --fs-4xl: clamp(2.8rem, 2.2rem + 3vw, 4.6rem);

  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* Spacing (4px-Raster) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  --space-20: 9rem;

  /* Layout */
  --content-width: 1240px;
  --content-width-narrow: 780px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 560ms;

  /* Schatten */
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  --shadow-glow-red: 0 6px 20px -6px rgba(20, 6, 10, 0.5), 0 2px 8px -2px rgba(227, 66, 52, 0.35);
  --shadow-glow-blue: 0 0 60px -12px rgba(96, 130, 182, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}