:root {
    /* ========================================================
       PALETA Y COLORES INSTITUCIONALES (REDISEÑO MOCKUPS 2.0)
       ======================================================== */
    /* Jerarquía de texto */
    --color-text: #0F294A;                      /* Títulos y encabezados principales (azul marino profundo) */
    --color-text-secondary: #4A5568;            /* Cuerpo de texto legible y accesible (ratio WCAG > 7:1) */
    --color-eyebrow: #64748B;                   /* Subtítulos / Eyebrows en mayúsculas (slate blue, ratio 4.54:1) */
    --color-text-muted: #64748B;                /* Texto secundario y metadatos */

    /* Colores primarios e interactivos */
    --color-primary: #5363B8;                   /* Azul índigo suave para botones e interactividad */
    --color-primary-hover: #4352A5;             /* Hover índigo profundo */
    --color-primary-dark: #0F294A;              /* Azul marino profundo institucional */
    --color-primary-light: #EEF3FB;             /* Fondo secundario azul pastel/lavanda muy tenue */
    --color-accent: #5363B8;                    /* Acento interactivo y foco */
    --color-accent-hover: #4352A5;

    /* Acento cálido / CTA (Botones de agendamiento y proceso) */
    --color-warm: #F4B83E;                      /* Amarillo dorado / mostaza cálido */
    --color-warm-hover: #E2A62C;                /* Hover cálido */
    --color-warm-text: #0F294A;                 /* Texto oscuro de alto contraste sobre amarillo (ratio 8.4:1) */

    /* Iconografía y badges circulares */
    --color-icon-bg: #EBF2FD;                   /* Fondo de círculo de ícono (azul/lavanda muy claro) */
    --color-icon: #4F5FA8;                      /* Ícono centrado (azul índigo) */

    /* Superficies y fondos */
    --color-surface: #FFFFFF;                   /* Tarjetas blancas puras */
    --color-surface-alt: #EEF3FB;               /* Superficie secundaria / contenedor pastel suave */
    --color-background: #F8FAFD;                /* Fondo general del sitio */
    --color-border: #E4EBF4;                    /* Bordes sutiles y limpios (#E4EBF4) */
    --border-subtle: 1px solid var(--color-border);

    /* Textos sobre fondo oscuro */
    --color-text-on-dark: #FFFFFF;
    --color-text-on-dark-secondary: #E0E7FF;

    /* Semántica funcional */
    --color-success: #16803A;
    --color-warning: #D97706;
    --color-danger: #DC2626;

    /* ========================================================
       ESPACIADOS
       ======================================================== */
    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;

    /* ========================================================
       CURVATURAS Y RADIOS
       ======================================================== */
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-card: 1.125rem;                    /* 18px (rango 16px - 20px) para tarjetas */
    --radius-lg: var(--radius-card);            /* Estandarizado a 18px */
    --radius-xl: 1.5rem;
    --radius-pill: 9999px;                      /* Píldora completa para botones, tags y chips */

    /* ========================================================
       SOMBRAS AMBIENTALES ULTRA SUAVES
       ======================================================== */
    --shadow-soft: 0 4px 20px rgba(15, 41, 74, 0.04);
    --shadow-card: 0 2px 12px rgba(15, 41, 74, 0.03);
    --shadow-hover: 0 8px 30px rgba(15, 41, 74, 0.08);
    --shadow-xs: 0 1px 6px rgba(15, 41, 74, 0.04);
    --shadow-sm: var(--shadow-card);
    --shadow-md: var(--shadow-soft);
    --shadow-lg: 0 14px 40px rgba(15, 41, 74, 0.12);

    /* ========================================================
       TRANSICIONES Y LECTURA
       ======================================================== */
    --transition-fast: 150ms ease;
    --transition-default: 250ms ease;

    --content-width: 1100px;
    --reading-width: 72ch;

    /* Compatibilidad temporal para componentes existentes */
    --lavender-bg: var(--color-primary-light);
    --lavender-dark: var(--color-primary-dark);
    --accent: var(--color-primary);
    --accent-hover: var(--color-primary-hover);
    --accent-light: var(--color-primary-light);
    --accent-border: var(--color-border);
    --page-max-width: var(--content-width);
}