/*
 * Eduard Sedó — Design tokens (clean professional medical)
 * Inspirado en cotxe-net: limpio, plano, profesional, sin glassmorphism.
 * v2.0
 */

:root {
    /* ========== Fondos sólidos ========== */
    --bg-base: #FFFFFF;          /* fondo principal blanco */
    --bg-elevated: #F8FAFC;      /* fondo secundario muy claro */
    --bg-deep: #EEF2F6;          /* bandas alternas */
    --bg-dark: #0F2A3D;          /* footer y secciones oscuras */

    /* ========== Paleta azul (profesional médica) ========== */
    --brand-900: #0F2A3D;        /* azul muy oscuro (footer) */
    --brand-800: #15384F;
    --brand-700: #1E4D6B;
    --brand-600: #2C6582;
    --brand-500: #3E7B96;        /* azul teal principal */
    --brand-400: #5C97AD;
    --brand-300: #89B4C4;
    --brand-200: #B4CDD8;
    --brand-100: #DEE9EE;
    --brand-50:  #F0F5F8;

    /* ========== Acento secundario (azul más claro/cielo) ========== */
    --accent-700: #1E5F7A;
    --accent-500: #4A8FA8;
    --accent-300: #9BC2D2;
    --accent-100: #E2EEF3;

    /* ========== Texto ========== */
    --text-primary:   #1F2A37;
    --text-secondary: #4B5563;
    --text-muted:     #6B7280;
    --text-inverse:   #FFFFFF;

    /* ========== Bordes y separadores ========== */
    --border-light: #E5E7EB;
    --border-medium: #D1D5DB;

    /* ========== Estados (sin rojo, paleta azul/ámbar) ========== */
    --success: #2C6582;          /* azul oscuro (en lugar de verde) */
    --warning: #B17F2A;          /* ámbar oscuro */
    --info:    #3E7B96;

    /* ========== Sombras (sutiles, planas) ========== */
    --shadow-sm:
        0 1px 2px 0 rgba(15, 42, 61, 0.05);
    --shadow-md:
        0 4px 12px -2px rgba(15, 42, 61, 0.08),
        0 2px 4px -1px rgba(15, 42, 61, 0.04);
    --shadow-lg:
        0 12px 24px -8px rgba(15, 42, 61, 0.12),
        0 4px 8px -2px rgba(15, 42, 61, 0.06);
    --shadow-card: 0 2px 8px rgba(15, 42, 61, 0.06);
    --shadow-card-hover: 0 8px 24px rgba(15, 42, 61, 0.10);

    /* ========== Tipografía ========== */
    --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-sans:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

    /* ========== Tipografía — escalas ========== */
    --font-xs:   0.75rem;
    --font-sm:   0.875rem;
    --font-base: 1rem;
    --font-md:   1.125rem;
    --font-lg:   1.375rem;
    --font-xl:   1.875rem;
    --font-2xl:  2.5rem;
    --font-3xl:  3.25rem;

    --leading-tight: 1.2;
    --leading-snug:  1.4;
    --leading-base:  1.65;

    /* ========== Geometría — radios suaves, no píldora ========== */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-xl: 12px;
    --r-card: 8px;
    --r-button: 4px;

    /* ========== Espaciado ========== */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-14: 56px;
    --space-20: 80px;
    --space-30: 120px;

    /* ========== Anchuras de contenido ========== */
    --max-content:   1280px;
    --max-readable:  720px;

    /* ========== Movimiento ========== */
    --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 150ms;
    --dur-base: 250ms;
}

/* ========== Dark mode (opt-in con [data-theme="dark"]) ========== */
[data-theme="dark"] {
    --bg-base: #0F2A3D;
    --bg-elevated: #15384F;
    --bg-deep: #0A1F2E;
    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --border-light: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.15);
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}