/**
 * @file: variables.css
 * @description: Design System Tokens & Custom Properties (Theming)
 * @author: MS-KIT v1.0
 * 
 * INSTRUCCIONES:
 * Cambia los valores en :root para adaptar la identidad visual del cliente.
 * El resto del sitio heredará automáticamente estos valores.
 */

:root {
    /* =========================================
     1. PALETA DE COLORES (BRAND)
     ========================================= */

    /* Color Principal (Botones, Enlaces, Elementos destacados) */
    /* Púrpura Médico - Confianza y realeza */
    --color-primary: #8B5CF6;
    /* Tailwind Violet-500 */
    --color-primary-light: #A78BFA;
    /* Violet-400 */
    --color-primary-dark: #7C3AED;
    /* Violet-600 */

    /* Color Secundario (Acentos, Detalles UI) */
    /* Rosa Acento - Estética y belleza */
    --color-secondary: #EC4899;
    /* Tailwind Pink-500 */
    --color-secondary-light: #F472B6;
    --color-secondary-dark: #DB2777;

    /* Color de Acento (Call to Actions fuertes) */
    --color-accent: #7C3AED;

    /* =========================================
     2. COLORES NEUTROS Y TEXTO
     ========================================= */

    --color-white: #ffffff;
    --color-black: #111827;

    /* Fondos */
    --color-bg-body: #F9FAFB;
    /* Gray-50 */
    --color-bg-surface: #ffffff;
    --color-bg-alt: #F3F4F6;
    /* Gray-100 */

    /* Texto */
    --color-text-main: #1F2937;
    /* Gray-800 */
    --color-text-muted: #6B7280;
    /* Gray-500 */
    --color-text-light: #9CA3AF;
    /* Gray-400 */
    --color-text-inverted: #ffffff;

    /* Bordes */
    --color-border: #E5E7EB;
    /* Gray-200 */

    /* Estados Semánticos */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;

    /* =========================================
     3. TIPOGRAFÍA
     ========================================= */

    /* Headings: Moderna y geométrica para títulos */
    --font-heading: 'Poppins', sans-serif;

    /* Body: Legible y neutra para lectura */
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* =========================================
     4. ESPACIADO Y LAYOUT
     ========================================= */

    --spacing-section: 100px;
    /* Separación amplia entre secciones para estética premium */
    --spacing-container: 1280px;
    --header-height: 80px;

    --radius-sm: 0.375rem;
    /* 6px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 1rem;
    /* 16px */
    --radius-xl: 1.5rem;
    /* 24px */

    /* =========================================
     5. SHADOWS (Efecto Elevación Premium)
     ========================================= */

    /* Sutil: Para elementos estáticos o cards simples */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    /* Elevación Media: Para Cards de servicios */
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Elevación Alta: Para Hover effects (Floating) */
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Glow suave del color primario (Opcional) */
    --shadow-glow: 0 0 15px rgba(139, 92, 246, 0.3);

    /* Transiciones Estándar */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* Clase manual para forzar dark mode si se necesita toggle */
[data-theme="dark"] {
    --color-bg-body: #111827;
    --color-bg-surface: #1F2937;
    --color-bg-alt: #374151;
    --color-text-main: #F9FAFB;
    --color-text-muted: #D1D5DB;
    --color-text-light: #9CA3AF;
    --color-border: #374151;
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}