/* ==========================================================================
   Design Tokens — Rot Weiss Wien Basketball
   Gedämpfte, WCAG-AA-konforme Rot-/Weiß-Palette (kein Signalrot auf Flächen)
   ========================================================================== */

:root {
  /* --- Brand Red Scale (Burgundy → Crimson) --- */
  --red-900: #4A0B12;   /* aktive/pressed States */
  --red-700: #6E0F1A;   /* Header/Footer-Flächen, dunkler Verlauf */
  --red-600: #A61B27;   /* Primärfarbe: Buttons, Links, Akzente */
  --red-500: #C42430;   /* Hover auf hellem Grund, Badges */
  --red-100: #F3D8D9;   /* dezente Tint-Flächen, Trennlinien */
  --red-50:  #FBEEEE;   /* sehr helle Tint-Flächen, Card-Hintergrund */

  /* --- Neutrals --- */
  --ink-900: #1B1B1D;   /* Fließtext, Überschriften */
  --ink-700: #38393D;
  --ink-600: #5B5D63;   /* Sekundärtext */
  --ink-300: #9CA0A6;   /* Platzhalter, deaktiviert */
  --white:   #FFFFFF;
  --offwhite:#F7F5F4;   /* alternierende Section-Hintergründe */
  --border:  #E6E1E0;

  /* --- Feedback --- */
  --success: #256B45;
  --success-bg: #E7F3EC;
  --danger:  #A61B27;
  --danger-bg: #FBEEEE;

  /* --- Typography --- */
  --font-display: "Plus Jakarta Sans", "Arial Narrow", sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-900: clamp(2.4rem, 1.7rem + 2.4vw, 4.1rem);
  --fs-800: clamp(2.1rem, 1.7rem + 1.8vw, 3.2rem);
  --fs-700: clamp(1.6rem, 1.4rem + 0.9vw, 2.2rem);
  --fs-600: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-500: 1.125rem;
  --fs-400: 1rem;
  --fs-300: 0.875rem;
  --fs-200: 0.75rem;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Layout --- */
  --container-max: 1200px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  /* Signature card shape — three soft corners, one cut like a scoreboard
     placard / jersey tag. Used only for content cards, not inputs/buttons,
     so it reads as a deliberate mark rather than a global reskin. */
  --radius-tag: 22px 22px 22px 4px;
  --radius-tag-top: 22px 22px 0 0;
  --radius-tag-sm: 14px 14px 14px 4px;

  /* --- Glass (dark-surface cards only, e.g. hero panel, CTA) --- */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-hover: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: blur(16px) saturate(160%);

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med: 280ms;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(27, 27, 29, 0.06), 0 1px 3px rgba(27, 27, 29, 0.08);
  --shadow-md: 0 4px 10px rgba(27, 27, 29, 0.08), 0 2px 4px rgba(27, 27, 29, 0.06);
  --shadow-lg: 0 16px 40px rgba(74, 11, 18, 0.16);

  --header-h: 76px;
}

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