:root {
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;
  --radius-xs: 0.125rem;
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-full: 50%;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-red: #ff0000;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #dddddd;
  --color-gray-400: #999999;
  --color-accent: #f6b800;
  --color-bg-default: var(--color-white);
  --color-bg-subtle: #f5f5f5;
  --color-text-default: var(--color-black);
  --color-text-muted: var(--color-gray-400);
  --color-border: var(--color-gray-300);
  --color-border-subtle: var(--color-gray-300);
  --color-bg-inverse: #000000;
  --color-text-inverse: #ffffff;
  --color-cta-instagram: linear-gradient(45deg, #ff0050, #e1306c);
  --color-cta-facebook: #1877F2;
  --color-cta-fussballde: #96C11F;
  --color-cta-contact: #34495e;
  --color-gradient-divider: linear-gradient(to right, transparent, var(--color-gray-300), transparent);
  --color-overlay-50: rgba(0, 0, 0, 0.5);
  --color-overlay-70: rgba(0, 0, 0, 0.7);
  --color-overlay-12: rgba(0, 0, 0, 0.12);
  --font-family-base: Inter, system-ui, sans-serif;
  --font-family-heading: Montserrat, sans-serif;
  --font-family-icon: "Font Awesome 6 Free";
  --font-size-base: 16px;
  --font-size-sm: 0.9rem;
  --font-size-md: 1.1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.4rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.8rem;
  --font-size-4xl: 2.2rem;
  --font-navcard-title: 2.75rem;
  --text-small: var(--font-size-sm);
  --line-height-tight: 1;
  --line-height-base: 1.6;
  --container-max-width: 1600px;
  --size-2xs: 0.25rem;
  --size-xs: 0.75rem;
  --size-sm: 3rem;
  --size-md: 3.75rem;
  --size-lg: 7.5rem;
  --size-xl: 20rem;
  --size-card-max: 17.5rem;
  --size-progress-max: 18.75rem;
  --size-submenu-min: 16.25rem;
  --border-width-thin: 1px;
  --border-width-underline: 2px;
  --shadow-lift: 0 14px 28px rgba(0,0,0,0.12);
  --z-index-header: 1000;
  --z-index-overlay: 10;
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 1s cubic-bezier(.4,0,.2,1);
  --motion-lift-distance: 6px;
  --motion-scale-hover: 1.05;
  --team-color-youth1: #43AA8B;
  --team-color-youth2: #4F7CAC;
  --team-color-youth3: #F77F00;
  --team-color-oldies: #D62828;
  --team-color-senior: #3A3A3A;
  --color-accent-red: #d62828;
  --color-accent-navy: #003049;
  --color-accent-orange: #f77f00;
  --color-accent-teal: #2a9d8f;
  --color-accent-brown: #6d4c41;
  --color-accent-blue: #277da1;
  --color-accent-purple: #6a4c93;
  --color-accent-mint: #43aa8b;
  --color-accent-sand: #f4a261;
  --color-accent-slate: #8d99ae;
  --text-body: var(--font-size-base);
  --text-meta: var(--font-size-xs);
  --heading-h3: var(--font-size-lg);
  --heading-h2: var(--font-size-xl);
  --heading-h1: var(--font-size-4xl);
  --color-bg-dark: #111111;
  --color-bg-main: #ffffff;
  --color-bg-dark-soft: #1a1a1a;
  --divider-line: rgba(255, 255, 255, 0.12);
}
.accent-red    { --color-accent: var(--color-accent-red); }
.accent-navy   { --color-accent: var(--color-accent-navy); }
.accent-orange { --color-accent: var(--color-accent-orange); }
.accent-teal   { --color-accent: var(--color-accent-teal); }
.accent-brown  { --color-accent: var(--color-accent-brown); }
.accent-blue   { --color-accent: var(--color-accent-blue); }
.accent-purple { --color-accent: var(--color-accent-purple); }
.accent-mint   { --color-accent: var(--color-accent-mint); }
.accent-sand   { --color-accent: var(--color-accent-sand); }
.accent-slate  { --color-accent: var(--color-accent-slate); }