:root {
  /* Backgrounds */
  --color-bg-primary:      #0D0D0D;
  --color-bg-secondary:    #141414;
  --color-bg-card:         #1A1A1A;
  --color-bg-elevated:     #222222;

  /* Accent */
  --color-accent-red:      #CC2222;
  --color-accent-red-hover:#E02828;
  --color-accent-red-dim:  rgba(204, 34, 34, 0.12);
  --color-accent-red-border: rgba(204, 34, 34, 0.3);

  /* Text */
  --color-text-primary:    #F0F0F0;
  --color-text-secondary:  #A0A0A0;
  --color-text-muted:      #525252;

  /* Metallic */
  --color-metallic-light:  #C8C8C8;
  --color-metallic-mid:    #787878;
  --color-metallic-dark:   #3A3A3A;

  /* Borders */
  --color-border:          #2A2A2A;

  /* Fonts */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);

  /* Radii */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* Motion */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  150ms;
  --duration-base:  300ms;
  --duration-slow:  600ms;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 60px rgba(204, 34, 34, 0.12), 0 0 120px rgba(204, 34, 34, 0.06);
  --shadow-glow-sm: 0 0 20px rgba(204, 34, 34, 0.2);
}