/**
 * Tokens del sistema de diseño de vetCare / LomitosBonitos.MX.
 * Ver docs/sistema-diseno.md para la justificación de cada decisión.
 * Ningún archivo de componente o vista debe usar un valor de color,
 * tipografía o espaciado que no venga de aquí.
 */

:root {
    /* Color — marca */
    --color-marca: #4B3B63;
    --color-marca-fuerte: #332745;
    --color-marca-suave: #EDE8F2;

    /* Color — agua (acento secundario, ligado al servicio de baño) */
    --color-agua: #1D7A8C;
    --color-agua-suave: #E3F1F3;

    /* Color — superficies */
    --color-fondo: #F7F5F9;
    --color-superficie: #FFFFFF;
    --color-tinta: #2A2430;
    --color-tinta-suave: #6B6373;
    --color-borde: #DFD9E6;

    /* Color — semáforo clínico (reservado, ver docs/sistema-diseno.md) */
    --color-semaforo-normal: #2E7D4F;
    --color-semaforo-normal-suave: #E4F3EA;
    --color-semaforo-leve: #9A6300;
    --color-semaforo-leve-suave: #FBF0DA;
    --color-semaforo-atencion: #B23B3B;
    --color-semaforo-atencion-suave: #FAE6E6;

    /* Tipografía */
    --fuente-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-numerica: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

    --texto-titulo: 700 1.5rem/1.25 var(--fuente-base);
    --texto-subtitulo: 600 1.125rem/1.3 var(--fuente-base);
    --texto-cuerpo: 400 1rem/1.5 var(--fuente-base);
    --texto-apoyo: 400 0.875rem/1.4 var(--fuente-base);
    --texto-boton: 600 1rem/1 var(--fuente-base);
    --texto-numerico-grande: 700 1.75rem/1.2 var(--fuente-numerica);

    /* Espaciado */
    --espacio-1: 4px;
    --espacio-2: 8px;
    --espacio-3: 12px;
    --espacio-4: 16px;
    --espacio-5: 24px;
    --espacio-6: 32px;
    --espacio-7: 48px;

    /* Forma */
    --radio-sm: 8px;
    --radio-md: 12px;
    --radio-lg: 16px;

    /* Interacción */
    --objetivo-tactil-min: 48px;
    --altura-barra-inferior: 72px;

    /* Elevación */
    --sombra-tarjeta: 0 1px 3px rgba(42, 36, 48, 0.08), 0 1px 2px rgba(42, 36, 48, 0.06);
    --sombra-barra-inferior: 0 -2px 8px rgba(42, 36, 48, 0.08);
}