/* Design tokens — Rediseño Sprint Fase 1. Los componentes los consumen en fases posteriores. */
:root {
    /* Paleta */
    --color-primary: #0A2559;
    --color-accent: #2D7DC0;
    --color-bg: #FAFAF7;
    --color-surface: #FFFFFF;
    --color-text: #1A1A1A;
    --color-text-muted: #6B6863;
    --color-border: #E7E3DC;
    --color-footer: #0A1428; /* navy carbón — más profundo que primary, pensado para grandes superficies como el footer */
    --color-primary-hover: #123a80;

    /* Tipografía */
    --font-family-base: 'Inter Tight', system-ui, -apple-system, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Escala tipográfica (font-size + line-height) */
    --font-size-hero-desktop: 60px;
    --line-height-hero-desktop: 1.03;
    --font-size-hero-mobile: 36px;
    --font-size-section-title-desktop: 38px;
    --line-height-section-title-desktop: 1.1;
    --font-size-section-title-mobile: 28px;
    --font-size-h3: 26px;
    --font-size-price-large: 30px;
    --font-size-price: 19px;
    --font-size-body-large: 18px;
    --font-size-body: 15px;
    --font-size-small: 13px;
    --font-size-caption: 12px;
    --font-size-micro: 9px;

    /* Spacing (múltiplos de 4) */
    --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-12: 48px;
    --space-14: 56px;
    --space-18: 72px;

    /* Radios y sombras */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-sheet: 16px 16px 0 0;
    --radius-pill: 20px;
    --shadow-card-hover: 0 8px 20px rgba(10, 37, 89, 0.12);
    --shadow-arrow: 0 4px 14px rgba(10, 37, 89, 0.12);

    /* Breakpoint (referencia, se usa en media queries) */
    --breakpoint-mobile: 860px;
}