/* ===== Variables ===== */
:root {
  /* Brand Colors */
  --color-primary: #1a1a1a;
  --color-primary-light: #2A2A2A;
  --color-primary-lighter: #3A3A3A;
  --color-secondary: #111111;
  --color-accent: #fefd05;
  --color-accent-light: #fffd44;
  --color-accent-dark: #d4d300;
  --color-tertiary: #C41E1E;
  --color-tertiary-light: #E83838;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-light: #F5F0EB;
  --color-gray-100: #E8E3DE;
  --color-gray-200: #C4BFBA;
  --color-gray-300: #9E9994;
  --color-gray-400: #7A7570;
  --color-gray-500: #5A5550;
  --color-gray-600: #3A3530;
  --color-dark: #0D0D0D;

  /* Text */
  --text-primary: #F5F0EB;
  --text-secondary: #C4BFBA;
  --text-muted: #9E9994;
  --text-on-accent: #1a1a1a;

  /* Fonts */
  --font-heading: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --section-padding: 100px 0;
  --section-padding-mobile: 60px 0;
  --container-max: 1200px;
  --container-padding: 0 24px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-glow: 0 0 20px rgba(254, 253, 5, 0.3);
  --shadow-glow-md: 0 0 30px rgba(254, 253, 5, 0.5);
  --shadow-glow-sm: 0 0 10px rgba(254, 253, 5, 0.2);
}