:root {
  /* ========================================
     DARK CHARCOAL + GOLD PALETTE
  ======================================== */

  /* Background Colors */
  --color-bg: #1A1A1B;
  --color-bg-secondary: #111112;
  --color-bg-tertiary: #222224;
  --color-bg-card: #2D2D2E;
  --color-bg-header: rgba(26, 26, 27, 0.9);
  --color-bg-header-scroll: rgba(26, 26, 27, 0.98);

  /* Accent Colors */
  --gold: #D4AF37;
  --gold-rgb: 212, 175, 55;
  --gold-light: #E8C84A;
  --gold-dark: #B8941F;
  --red: #B22222;
  --red-rgb: 178, 34, 34;
  --red-light: #D43333;
  --green: #2E8B57;
  --green-rgb: 46, 139, 87;

  /* Primary = Gold */
  --color-primary: var(--gold);
  --color-primary-rgb: var(--gold-rgb);
  --color-secondary: var(--red);

  /* Text Colors */
  --color-text: #F5F5F5;
  --color-text-secondary: #B0B0B0;
  --color-text-muted: #777777;

  /* Borders */
  --color-border: rgba(212, 175, 55, 0.15);
  --color-border-hover: rgba(212, 175, 55, 0.35);

  /* Glassmorphism */
  --glass-bg: rgba(45, 45, 46, 0.6);
  --glass-border: rgba(212, 175, 55, 0.1);
  --glass-border-hover: rgba(212, 175, 55, 0.25);

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #1A1A1B 0%, #2D2D2E 50%, #1A1A1B 100%);
  --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #E8C84A 50%, #B8941F 100%);
  --gradient-red: linear-gradient(135deg, #B22222 0%, #D43333 100%);
  --gradient-card: linear-gradient(145deg, #2D2D2E 0%, #252526 100%);
  --gradient-dark: linear-gradient(180deg, #1A1A1B 0%, #111112 100%);

  /* Typography */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-main);

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.4vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1400px;
  --header-height: 70px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.3);
  --shadow-red: 0 4px 20px rgba(178, 34, 34, 0.3);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition: 300ms ease;
  --transition-slow: 500ms ease;

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-cursor: 9999;
}

/* Responsive images */
img { max-width: 100%; height: auto; }