/* ==========================================================================
   En Titulares — tokens de diseño
   --------------------------------------------------------------------------
   Los valores replican la identidad visual del sitio actual (tema Jannah).
   Donde el original incumplía contraste AA se conserva el tono de marca
   pero se ajusta la luminosidad; ver la nota en --brand-ink.
   ========================================================================== */

:root {
    /* --- Marca ---------------------------------------------------------- */

    /* Rosa-rojo original del sitio. Contraste con blanco 3.66:1, así que
       solo se usa en superficies grandes, filetes y estados hover, nunca
       como fondo de texto pequeño. */
    --brand: #FF2B58;

    /* Variante para fondos que llevan texto pequeño en blanco (barra de
       navegación, etiquetas de categoría). Contraste 5.10:1 — cumple AA. */
    --brand-ink: #D91048;
    --brand-ink-hover: #B60D3C;

    --brand-soft: #FFEDF1;

    /* --- Neutros -------------------------------------------------------- */
    --bg: #F7F7F7;
    --surface: #FFFFFF;
    --surface-alt: #FAFAFA;

    --text: #2C2F34;
    --text-muted: #6B7178;      /* 4.9:1 sobre blanco */
    --text-faint: #8A9099;      /* solo para texto de 16px+ */
    --text-invert: #FFFFFF;

    --dark: #1F2024;
    --dark-soft: #25282B;
    --dark-line: #34383D;

    --line: #E4E6E9;
    --line-strong: #CFD3D8;

    /* --- Semánticos ----------------------------------------------------- */
    --success: #17784B;
    --success-bg: #E6F4EC;
    --danger: #B3261E;
    --danger-bg: #FCEDEC;
    --warning: #8A5300;
    --warning-bg: #FFF4E0;
    --info: #0B5D8A;
    --info-bg: #E7F3F9;

    /* --- Tipografía ----------------------------------------------------- */
    --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Escala tipográfica de razón constante */
    --fs-2xs: 0.6875rem;  /* 11px — solo mayúsculas con tracking */
    --fs-xs:  0.75rem;    /* 12px */
    --fs-sm:  0.875rem;   /* 14px */
    --fs-base: 1rem;      /* 16px — mínimo para cuerpo, evita zoom en iOS */
    --fs-md:  1.125rem;   /* 18px */
    --fs-lg:  1.375rem;   /* 22px */
    --fs-xl:  1.75rem;    /* 28px */
    --fs-2xl: 2.125rem;   /* 34px */
    --fs-3xl: 2.75rem;    /* 44px */

    --lh-tight: 1.22;
    --lh-snug: 1.35;
    --lh-normal: 1.6;
    --lh-loose: 1.75;

    /* --- Espaciado: escala de 4px ---------------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* --- Formas y sombras ------------------------------------------------ */
    --radius-sm: 3px;
    --radius: 5px;
    --radius-lg: 10px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 2px rgba(19, 22, 26, .06);
    --shadow: 0 2px 8px rgba(19, 22, 26, .08);
    --shadow-lg: 0 8px 28px rgba(19, 22, 26, .12);

    /* --- Disposición ----------------------------------------------------- */
    --container: 1200px;
    --container-narrow: 760px;
    --gutter: var(--sp-4);

    /* --- Capas ----------------------------------------------------------- */
    --z-base: 1;
    --z-sticky: 100;
    --z-header: 200;
    --z-drawer: 400;
    --z-modal: 600;
    --z-toast: 800;

    /* --- Movimiento ------------------------------------------------------ */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: 150ms;
    --dur: 220ms;
    --dur-slow: 320ms;
}

/* Escala reducida en móvil: los titulares de 44px no caben en 375px. */
@media (max-width: 767px) {
    :root {
        --fs-2xl: 1.625rem;
        --fs-3xl: 1.875rem;
        --gutter: var(--sp-3);
    }
}

/* Quien pide menos movimiento recibe transiciones casi instantáneas en
   lugar de ninguna: se conserva la retroalimentación sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 1ms;
        --dur: 1ms;
        --dur-slow: 1ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}