:root {
  /* =====================
     🎨 COLORES BASE
     ===================== */

  --color-base: #ffffff;          /* Fondo general limpio */
  --color-deep: #f9fafb;          /* Contenedores, tarjetas y secciones suaves */
  --color-footer: #f3f4f6;        /* Fondo claro específico del footer */
  --color-text: #111111;          /* Texto principal con excelente contraste */
  --color-border: #e5e7eb;        /* Líneas, inputs, contornos suaves */

  /* =====================
     🎯 COLORES DE MARCA
     ===================== */

  --color-accent: #111827;        /* Color principal sobrio: gris oscuro profundo */
  --color-primary: #374151;       /* Color secundario: gris medio intenso */

  /* =====================
     ✅ COLORES DE ESTADO
     ===================== */

  --color-success: #16a34a;       /* Verde elegante para éxito */
  --color-warning: #facc15;       /* Amarillo claro para advertencias */
  --color-danger:  #dc2626;       /* Rojo sobrio para errores */

  /* =====================
     ✍️ TIPOGRAFÍA
     ===================== */

  --font-main: 'Inter', sans-serif;  /* Fuente minimalista y moderna */

  /* =====================
     📏 BORDES Y RADIOS
     ===================== */

  --radius-sm: 0.25rem;           /* Bordes discretos */
  --radius: 0.5rem;               /* Redondeo estándar sobrio */
  --radius-lg: 0.75rem;           /* Redondeo más amplio para modales */

  /* =====================
     🧱 SOMBRAS
     ===================== */

  --shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Sombra muy suave para look limpio */

  /* =====================
     📐 ESPACIADOS (MÁRGENES Y PADDINGS)
     ===================== */

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* =====================
     🔠 TAMAÑOS DE TEXTO
     ===================== */

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;

  /* =====================
     🔄 TRANSICIONES Y ANIMACIONES
     ===================== */

  --transition-fast: 0.2s;
  --transition-base: 0.4s;
  --transition-slow: 0.8s;
}