:root {
  /* === COLORI PRIMARI STEAMPUNK === */
  --color-brass-primary: #b8860b;
  --color-brass-light: #daa520;
  --color-brass-dark: #8b6914;
  --color-copper: #b87333;
  --color-copper-light: #d4915d;
  --color-copper-dark: #9a5f2a;
  
  /* === BACKGROUNDS === */
  --color-steam-bg: #1a1410;
  --color-steam-bg-light: #2d2419;
  --color-steam-bg-dark: #0f0c08;
  --color-parchment: #f4e8d0;
  --color-parchment-dark: #e5d4b5;
  
  /* === ACCENTI E DETTAGLI === */
  --color-gear-rust: #8b4513;
  --color-gear-iron: #4a4a4a;
  --color-gear-bronze: #cd7f32;
  --color-steam-white: #e8e0d5;
  --color-steam-glow: #ffd700;
  --color-rivet-dark: #2c2c2c;
  --color-rivet-light: #5a5a5a;
  
  /* === TESTI === */
  --color-text-primary: #f4e8d0;
  --color-text-secondary: #c9b896;
  --color-text-accent: #daa520;
  --color-text-dark: #1a1410;
  
  /* === BORDI E OMBRE === */
  --color-border-brass: #b8860b;
  --color-border-copper: #b87333;
  --color-border-dark: #3d3026;
  --shadow-brass: 0 4px 20px rgba(184, 134, 11, 0.3);
  --shadow-copper: 0 4px 20px rgba(184, 115, 51, 0.3);
  --shadow-deep: 0 10px 40px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.4);
  
  /* === GRADIENTI === */
  --gradient-brass: linear-gradient(135deg, var(--color-brass-light) 0%, var(--color-brass-primary) 50%, var(--color-brass-dark) 100%);
  --gradient-copper: linear-gradient(135deg, var(--color-copper-light) 0%, var(--color-copper) 50%, var(--color-copper-dark) 100%);
  --gradient-steam: linear-gradient(180deg, var(--color-steam-bg-dark) 0%, var(--color-steam-bg) 50%, var(--color-steam-bg-light) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(244, 232, 208, 0.1) 0%, rgba(244, 232, 208, 0.05) 100%);
  
  /* === TIPOGRAFIA === */
  --font-display: 'Cinzel', serif;
  --font-body: 'Crimson Text', serif;
  --font-accent: 'Orbitron', sans-serif;
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  
  /* === SPAZIATURE === */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* === BORDI E RAGGI === */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
  
  /* === TRANSIZIONI === */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-gear: 20s linear infinite;
  
  /* === Z-INDEX === */
  --z-preloader: 9999;
  --z-navbar: 1000;
  --z-cookie: 900;
  --z-modal: 800;
  --z-overlay: 700;
  --z-gears: 1;
  --z-content: 10;
  
  /* === EFFETTI SPECIALI === */
  --blur-glass: blur(10px);
  --blur-steam: blur(20px);
  --glow-brass: 0 0 20px var(--color-brass-primary), 0 0 40px var(--color-brass-primary);
  --glow-steam: 0 0 30px var(--color-steam-glow), 0 0 60px var(--color-steam-glow);
  
  /* === DIMENSIONI INGRANAGGI === */
  --gear-size-sm: 60px;
  --gear-size-md: 120px;
  --gear-size-lg: 200px;
  --gear-size-xl: 300px;
}

/* === DARK MODE OVERRIDES (opzionale) === */
@media (prefers-color-scheme: dark) {
  :root {
    --color-steam-bg: #0a0806;
    --color-steam-bg-light: #1a1410;
  }
}