:root {
  /* ==================== COLORES ==================== */
  --color-primary: #4E008E;
  --color-secondary: #FF6600;
  --color-text: #585656;
  --color-text-light: #585656;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-overlay: rgba(0, 0, 0, 0.4);
  --color-card-bg: #FFFFFF;
  --color-border: var(--color-secondary);

  /* ==================== GRADIENTES ==================== */
  --gradient-hero: linear-gradient(135deg, #f60, #7f1d93);
  --gradient-footer: linear-gradient(to right, #f26a00, #902278);
  --gradient-text: linear-gradient(115.294deg, #FF6600 46%, #4E008E 95%, #A63347 96%, rgba(255, 102, 0, 80%) 100%, rgba(255, 102, 0, 60%) 100%);

  /* ==================== BREAKPOINTS ==================== */
  --bp-sm: 600px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1024px;

  /* ==================== ESPACIADO ==================== */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 5rem;

  /* ==================== BORDES ==================== */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 25px;
  --radius-full: 50%;

  /* ==================== SOMBRAS ==================== */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.15);

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

  /* ==================== TIPOGRAFÍA ==================== */
  --font-primary: 'lato-regular', sans-serif;
  --font-display: 'circular-sdk-black', sans-serif;
  --font-heading: 'inter-bold', sans-serif;

  --fs-xs: 0.8rem;
  --fs-sm: 0.95rem;
  --fs-base: 1rem;
  --fs-lg: 1.2rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.8rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 4rem;

  /* ==================== LAYOUT ==================== */
  --container-max: 1200px;
  --header-height: 100px;
  --nav-width: 70%;
  --nav-max-width: 300px;

  /* ==================== Z-INDEX ==================== */
  --z-overlay: 1000;
  --z-nav: 1100;
  --z-header: 1100;
  --z-toggle: 1200;
  --z-modal: 1300;
}