/**
 * Bobteam Illmann – Design Tokens
 * Motorsport-Livery Identität (Runde 2: Helles Livery-Design)
 *
 * Alle Werte für Farben, Schriften, Abstände und Maße.
 * WCAG-AA/AAA-Kontrastberechnungen sind direkt nachgewiesen.
 *
 * KONSTRASTE & WCAG AA / AAA NACHWEIS:
 * ------------------------------------------------------------
 * Grundfläche Hell: --color-bg (#f4f6f9, Relative Luminanz L = 0.9236)
 * - Haupttext Teamblau dunkel (#0f1f38, L = 0.0139) auf --color-bg:
 *   Kontrast 15.24:1 (WCAG AAA bestanden, Mindestwert 7:1)
 * - Sekundärtext Muted (#3e516b, L = 0.0793) auf --color-bg:
 *   Kontrast 7.53:1 (WCAG AAA bestanden, Mindestwert 7:1)
 * - Livery-Rot (#dc1444, L = 0.1606) auf --color-bg:
 *   Kontrast 4.62:1 (WCAG AA bestanden, Mindestwert 4.5:1 für Fließtext, 3.0:1 für Großtext)
 *
 * Karten / Container Weiß: --color-surface (#ffffff, L = 1.0000)
 * - Haupttext Teamblau dunkel (#0f1f38, L = 0.0139) auf Weiß:
 *   Kontrast 16.43:1 (WCAG AAA bestanden)
 * - Sekundärtext Muted (#3e516b, L = 0.0793) auf Weiß:
 *   Kontrast 8.12:1 (WCAG AAA bestanden)
 * - Livery-Rot (#dc1444, L = 0.1606) auf Weiß:
 *   Kontrast 4.98:1 (WCAG AA bestanden, Mindestwert 4.5:1)
 * - Tiefes Livery-Rot für Kleintext (#c00f38, L = 0.1150) auf Weiß:
 *   Kontrast 6.36:1 (WCAG AA bestanden)
 *
 * Livery-Rot Button: #dc1444 (L = 0.1606)
 * - Weißer Button-Text (#ffffff) auf #dc1444:
 *   Kontrast 4.98:1 (WCAG AA bestanden)
 * - Button Hover (#b80c35, L = 0.1220):
 *   Kontrast 6.10:1 (WCAG AA bestanden)
 *
 * Teamblau-Blöcke: Kopf, Hero, Stats-Bar, Fuß (#0f1f38, L = 0.0139)
 * - Weißer Text (#ffffff, L = 1.0000) auf Teamblau:
 *   Kontrast 16.43:1 (WCAG AAA bestanden)
 * - Muted Eisgrau (#b8c9df, L = 0.5690) auf Teamblau:
 *   Kontrast 9.69:1 (WCAG AAA bestanden)
 * - Livery-Rot (#dc1444) auf Teamblau:
 *   Kontrast 3.30:1 (für grafische UI-Elemente und Großschrift >= 3.0:1)
 * ------------------------------------------------------------
 */

:root {
  /* ==========================================================================
     FARBEN (WCAG AA / AAA konform)
     ========================================================================== */

  /* Grundflächen (HELL wie eine Rennlackierung) */
  --color-bg: #f4f6f9;               /* Kühles Hellgrau / Rennlackierung-Weiß */
  --color-bg-alt: #ffffff;           /* Reinweiß für kontrastierende Abschnitte */
  --color-surface: #ffffff;          /* Karten, Kacheln, Container */
  --color-surface-hover: #eef2f7;    /* Kachel-Hover auf hellem Grund */
  --color-surface-subtle: #ebf0f7;   /* Feine helle Kontrastfläche */

  /* Teamblau (als kräftige Blöcke: Kopf, Hero, Stats, Fuß – nicht überall!) */
  --color-team-blue: #0f1f38;        /* Teamblau dunkel */
  --color-team-blue-surface: #182f53;/* Angehobene Fläche in Teamblau-Blöcken */
  --color-team-blue-dark: #091424;   /* Tiefstes Teamblau für Footer/Stats */
  --color-team-blue-light: #1e3a68;  /* Helles Teamblau für Livery-Streifen */

  /* Textfarben auf hellem Grund */
  --color-text: #0f1f38;             /* Haupttext Teamblau dunkel (Kontrast 15.24:1 / 16.43:1) */
  --color-text-muted: #3e516b;       /* Sekundärtext Schieferblau (Kontrast 7.53:1 / 8.12:1) */

  /* Textfarben auf dunklen Blöcken (Header, Hero, Footer, Stats) */
  --color-text-on-dark: #ffffff;     /* Weiß auf Teamblau (Kontrast 16.43:1) */
  --color-text-on-dark-muted: #b8c9df; /* Muted Eisgrau auf Teamblau (Kontrast 9.69:1) */

  /* Livery-Rot (aus Helm im Logo): Akzent, Buttons, Badges, Rennstreifen */
  --color-red: #dc1444;              /* Livery-Rot (Kontrast 4.98:1 auf Weiß, 4.62:1 auf Hellgrau) */
  --color-red-hover: #b80c35;        /* Button-Hover (Kontrast 6.10:1) */
  --color-red-dark: #7a0b25;         /* Dunkles Livery-Rot */
  --color-red-text: #c00f38;         /* Tiefes Livery-Rot für Kleintext (Kontrast 6.36:1) */

  /* Deutschland-Streifen (wie im Logo unter ILLMANN – nur als schmaler Streifen) */
  --livery-black: #000000;
  --livery-red: #dc1444;
  --livery-gold: #ffcc00;

  /* Ränder & Trennlinien */
  --color-border: #d2dbe5;           /* Standardrand auf hellem Grund */
  --color-border-subtle: #e2e8f0;    /* Feine Haarlinie auf hellem Grund */
  --color-border-dark: rgba(255, 255, 255, 0.12); /* Ränder in Teamblau-Blöcken */

  /* Medaillen-Farben (Erfolge: Text steht immer zusätzlich dabei!) */
  --medal-gold-bg: #fff8e1;
  --medal-gold-text: #8a6500;
  --medal-gold-border: #d4a017;

  --medal-silver-bg: #f1f5f9;
  --medal-silver-text: #1e293b;
  --medal-silver-border: #94a3b8;

  --medal-bronze-bg: #fff3ed;
  --medal-bronze-text: #9a3412;
  --medal-bronze-border: #ea580c;

  /* Fokusring: Zweifarbig für maximale Sichtbarkeit auf Hell und Dunkel */
  --focus-ring-inner: #ffffff;
  --focus-ring-outer: #dc1444;

  /* ==========================================================================
     TYPOGRAFIE
     ========================================================================== */
  --font-display: 'Saira', system-ui, -apple-system, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;

  /* Schriftgrößen (Fluid Scale) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.9vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 1.3vw, 2.375rem);
  --text-4xl: clamp(2.25rem, 1.95rem + 1.8vw, 3.25rem);
  --text-hero: clamp(2.75rem, 2.2rem + 3vw, 4.5rem);

  /* Zeilenhöhen */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  /* Schnitte */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* ==========================================================================
     ABSTÄNDE & RASTER
     ========================================================================== */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  --container-max: 1360px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);

  /* Tippziel-Mindestgröße (Accessibility) */
  --target-min: 44px;

  /* ==========================================================================
     LIVERY-FORMEN & SCHNITTE
     ========================================================================== */
  --skew-angle: -8deg;
  --clip-angle-section: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%);
  --clip-angle-section-rev: polygon(0 24px, 100% 0, 100% 100%, 0 100%);
  --clip-angle-card: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  --clip-tag: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);

  /* Schatten & Ränder */
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-subtle: 1px solid var(--color-border-subtle);
  --border-livery: 2px solid var(--color-red);
  --shadow-card: 0 4px 18px rgba(15, 31, 56, 0.08);
  --shadow-card-hover: 0 8px 26px rgba(15, 31, 56, 0.14);
  --shadow-glow: 0 0 20px rgba(220, 20, 68, 0.35);

  /* Übergänge */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}