/**
 * Design Tokens – SV Hilden Ost 1975 e.V.
 * Adelux Editorial Style · Vereinsfarben SV Hilden Ost
 */

:root {
  /* ============================================================
     FARBEN
     ============================================================ */

  --color-primary:            #E52E19;
  --color-primary-dark:       #c42514;
  --color-primary-light:      rgba(229, 46, 25, 0.1);
  --color-primary-ultra-light: rgba(229, 46, 25, 0.06);

  --color-dark:               #0f0f0f;
  --color-dark-2:             #1a1a1a;
  --color-dark-3:             #2d2d2d;

  --color-gray:               #6b7280;
  --color-gray-light:         #f3f4f6;
  --color-gray-border:        #e5e7eb;

  --color-white:              #ffffff;

  /* ============================================================
     TYPOGRAFIE
     ============================================================ */

  --font-heading: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ============================================================
     LAYOUT
     ============================================================ */

  --header-height:  72px;
  --container-max:  1200px;
  --container-pad:  clamp(16px, 4vw, 48px);

  /* ============================================================
     BORDER RADIUS
     ============================================================ */

  --radius-sm:   6px;
  --radius:      12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 100px;

  /* ============================================================
     SCHATTEN
     ============================================================ */

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow:     0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 12px 48px rgba(0, 0, 0, 0.14);
  --shadow-red: 0 8px 32px rgba(229, 46, 25, 0.30);

  /* ============================================================
     TRANSITIONS
     ============================================================ */

  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
     Z-INDEX
     ============================================================ */

  --z-dropdown:    100;
  --z-header:      1000;
  --z-mobile-menu: 1001;
  --z-overlay:     1200;
  --z-modal:       1300;

  /* ============================================================
     GLASSMORPHISM TOKENS
     ============================================================ */

  --glass-light-bg:     rgba(255, 255, 255, 0.75);
  --glass-light-border: rgba(255, 255, 255, 0.60);
  --glass-light-blur:   blur(32px) saturate(1.8);

  --glass-dark-bg:      rgba(10, 10, 10, 0.55);
  --glass-dark-border:  rgba(255, 255, 255, 0.10);
  --glass-dark-blur:    blur(24px) saturate(1.4);

  --glass-shadow:       0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --glass-inset:        0 1px 0 rgba(255,255,255,0.8) inset;
}