/**
 * Design System - SPD Berlin-Mitte Wahlkampf 2026
 * Basierend auf SPD Corporate Design Manual 2024
 */

:root {
  /* === Farben === */

  /* Primärfarbe: SPD-Rot */
  --color-spd-red: #E3000F;
  --color-spd-red-oklch: oklch(55% 0.24 28);

  /* Neutralfarben */
  --color-black: #000000;
  --color-dark: oklch(20% 0.01 28);
  --color-white: #FFFFFF;
  --color-light-grey: oklch(85% 0.01 28);
  --color-medium-grey: oklch(60% 0.01 28);

  /* Overlay-Farben */
  --color-overlay-light: rgba(255, 255, 255, 0.15);
  --color-overlay-dark: rgba(0, 0, 0, 0.15);
  --color-overlay-red: rgba(227, 0, 15, 0.7);

  /* === Typografie === */

  /* Font Families */
  --font-primary: 'SPD TheSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-versal: 'SPD TheSans Versal', 'SPD TheSans', sans-serif;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font Sizes (Responsive mit clamp) */
  --font-size-hero: clamp(3rem, 7.5vw, 7rem);
  --font-size-h1: clamp(2.5rem, 6vw, 5rem);
  --font-size-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --font-size-h3: clamp(1.375rem, 2.75vw, 2.25rem);
  --font-size-h4: clamp(1.125rem, 2.25vw, 1.5rem);
  --font-size-body-large: clamp(1rem, 2vw, 1.25rem);
  --font-size-body: clamp(0.875rem, 1.75vw, 1rem);
  --font-size-small: clamp(0.75rem, 1.5vw, 0.875rem);

  /* Line Heights */
  --line-height-tight: 0.88;
  --line-height-heading: 1.1;
  --line-height-body: 1.5;
  --line-height-relaxed: 1.75;

  /* Letter Spacing */
  --letter-spacing-tight: -0.03em;
  --letter-spacing-heading: -0.02em;
  --letter-spacing-normal: -0.01em;
  --letter-spacing-body: 0;
  --letter-spacing-wide: 0.01em;

  /* === Spacing === */

  --spacing-xs: clamp(0.5rem, 1vw, 0.75rem);
  --spacing-sm: clamp(0.75rem, 1.5vw, 1rem);
  --spacing-md: clamp(1rem, 2vw, 1.5rem);
  --spacing-lg: clamp(1.5rem, 3vw, 2rem);
  --spacing-xl: clamp(2rem, 4vw, 3rem);
  --spacing-2xl: clamp(2.5rem, 5vw, 4rem);
  --spacing-3xl: clamp(3rem, 6vw, 5rem);
  --spacing-4xl: clamp(4rem, 8vw, 6rem);
  --spacing-section: clamp(4rem, 10vw, 8rem);

  /* === Shadows === */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-2xl: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* Icon/Image Shadows */
  --shadow-icon: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));

  /* === Border Radius === */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* === Transitions === */

  --transition-fast: 0.15s;
  --transition-normal: 0.2s;
  --transition-slow: 0.3s;

  /* Easing Functions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Layout === */

  --max-width-content: 1400px;
  --max-width-text: 65ch;

  /* Grid Gaps */
  --gap-sm: clamp(1rem, 2vw, 1.5rem);
  --gap-md: clamp(1.5rem, 3vw, 2rem);
  --gap-lg: clamp(2rem, 4vw, 3rem);
  --gap-xl: clamp(2rem, 5vw, 4rem);

  /* === Z-Index === */

  --z-base: 1;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 10000;
}

/* === Dark Mode Support (optional) === */
@media (prefers-color-scheme: dark) {
  :root {
    /* Bei Bedarf Dark Mode Varianten definieren */
    /* Aktuell nutzt das Design primär Rot-auf-Hell und Weiß-auf-Rot */
  }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
    --transition-normal: 0.01ms;
    --transition-slow: 0.01ms;
  }
}