/**
 * ============================================================================
 * ESTACIÓN CUIDARTE - Variables de Marca y Colores
 * ============================================================================
 * Sistema de diseño centralizado
 */

:root {
    /* Colores Principales */
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;
    --primary-900: #312e81;

    /* Colores Secundarios */
    --secondary-50: #faf5ff;
    --secondary-100: #f3e8ff;
    --secondary-200: #e9d5ff;
    --secondary-300: #d8b4fe;
    --secondary-400: #c084fc;
    --secondary-500: #a855f7;
    --secondary-600: #9333ea;
    --secondary-700: #7e22ce;
    --secondary-800: #6b21a8;
    --secondary-900: #581c87;

    /* Grises */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Paleta Neutral (compatibilidad con landing-styles) */
    --neutral-50: var(--gray-50);
    --neutral-100: var(--gray-100);
    --neutral-200: var(--gray-200);
    --neutral-300: var(--gray-300);
    --neutral-400: var(--gray-400);
    --neutral-500: var(--gray-500);
    --neutral-600: var(--gray-600);
    --neutral-700: var(--gray-700);
    --neutral-800: var(--gray-800);
    --neutral-900: var(--gray-900);
    --neutral-white: #ffffff;

    /* Paleta de marca extendida */
    --brand-blue: var(--primary-600);
    --brand-secondary: #8b5cf6;
    --brand-secondary-dark: #4338ca;
    --brand-accent: #ec4899;
    --gradient-light: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);

    /* Colores de Estado */
    --success-50: #f0fdf4;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;

    --warning-50: #fefce8;
    --warning-500: #eab308;
    --warning-600: #ca8a04;
    --warning-700: #a16207;

    --error-50: #fef2f2;
    --error-500: #ef4444;
    --error-600: #dc2626;
    --error-700: #b91c1c;

    --info-50: #eff6ff;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info-700: #1d4ed8;

    /* Tipografía */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */

    /* Espaciado */
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */

    /* Bordes */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-full: 9999px;

    /* 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);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Transiciones */
    --transition-fast: 150ms;
    --transition-base: 300ms;
    --transition-slow: 500ms;

    /* Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Clases de Utilidad */
.text-primary { color: var(--primary-600); }
.text-secondary { color: var(--secondary-600); }
.text-success { color: var(--success-600); }
.text-warning { color: var(--warning-600); }
.text-error { color: var(--error-600); }
.text-info { color: var(--info-600); }
.text-gray { color: var(--gray-600); }

.bg-primary { background-color: var(--primary-600); }
.bg-secondary { background-color: var(--secondary-600); }
.bg-success { background-color: var(--success-600); }
.bg-warning { background-color: var(--warning-600); }
.bg-error { background-color: var(--error-600); }
.bg-info { background-color: var(--info-600); }
.bg-gray { background-color: var(--gray-100); }

.border-primary { border-color: var(--primary-600); }
.border-secondary { border-color: var(--secondary-600); }
.border-gray { border-color: var(--gray-300); }

/* Gradientes */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%);
}

.gradient-warm {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-cool {
    background: linear-gradient(135deg, #667eea 0%, #4f46e5 100%);
}