:root {
    /* COLORES - Basados en el logo */
    --color-primario: #16A39C;
    --color-secundario: #0F5F5A;
    --color-acento: #5CC5BE;
    --color-claro: #F8FAFB;
    --color-blanco: #FFFFFF;
    --color-texto: #1A1A1A;
    --color-gris: #6B7280;
    --color-gris-claro: #E5E7EB;
    
    /* COLORES DARK MODE */
    --color-dark-bg: #0F1419;
    --color-dark-bg-secondary: #1A1F2E;
    --color-dark-texto: #E5E7EB;
    --color-dark-texto-secondary: #A0AEC0;
    --color-dark-card: #232E42;
    --color-dark-border: #2D3748;
    
    /* TIPOGRAFÍA */
    --font-principal: 'Poppins', sans-serif;
    --font-secundaria: 'Raleway', sans-serif;
    
    /* TAMAÑOS DE FUENTE */
    --fs-xs: 0.75rem;      /* 12px */
    --fs-sm: 0.875rem;     /* 14px */
    --fs-base: 1rem;       /* 16px */
    --fs-lg: 1.125rem;     /* 18px */
    --fs-xl: 1.25rem;      /* 20px */
    --fs-2xl: 1.5rem;      /* 24px */
    --fs-3xl: 1.875rem;    /* 30px */
    --fs-4xl: 2.25rem;     /* 36px */
    --fs-5xl: 3rem;        /* 48px */
    
    /* ESPACIADO */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-2xl: 3rem;    /* 48px */
    --spacing-3xl: 4rem;    /* 64px */
    
    /* SOMBRAS */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* TRANSICIONES */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    /* BORDER RADIUS */
    --radius-sm: 0.375rem;   /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 1rem;       /* 16px */
    --radius-full: 9999px;
}

/* Dark Mode */
body.dark-mode {
    --color-blanco: var(--color-dark-bg);
    --color-claro: var(--color-dark-bg-secondary);
    --color-texto: var(--color-dark-texto);
    --color-gris: var(--color-dark-texto-secondary);
    --color-gris-claro: var(--color-dark-border);
}