:root {
  /* 🎨 Colores base */
   --color-primary: var(--color-orange);
  --color-black: #0D0D0D;
  --color-black-soft: #1A1A1A;
  --color-white: #FFFFFF;
  --color-gray-light: #E0E0E0;
  --color-gray-border: #2C2C2C;
  --color-background: var(--color-black);

  /* 🎯 Colores de acento */
  --color-orange: #FF6B00;
  --color-orange-dark: #CC5500;

  /* 🖋 Tipografía */
  --font-primary: 'Mulish', sans-serif;

  /* 📐 Tamaños (espaciados y fuentes) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;

  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.25rem;   /* 20px */
  --font-size-xl: 2rem;      /* 32px */
  --font-size-xxl: 3rem;     /* 48px */

  /* 🧱 Bordes y radios */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;

  /* 🌫️ Sombras */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 12px rgba(0, 0, 0, 0.2);

  /* ⌛ Transiciones */
  --transition-fast: 0.2s ease-in-out;
  --transition-slow: 0.4s ease-in-out;

  --header-height: 80px;

}