/* DESIGN TOKENS — Marca Privada
   ============================================================================
   Sistema cromático dorado. El dorado NO es un acento editorial acotado: es el
   color núcleo del site y sí va en navegación, botones, estados y foco.
   (Esta regla sustituye a la anterior, que reservaba el dorado a la mancheta.)

   Tres familias y nada más:
     · gold-*  → marca y acento. ~10 % de la superficie.
     · warm-*  → neutros cálidos (misma familia de tono que el oro). ~85 %.
     · red-*   → único color ajeno. Solo error y validación, nunca en el chrome.
   El estado de éxito NO lleva color: tinta + glifo + texto.

   Anclaje: dorado del logo impreso #B5963F, ajustado para pantalla (más
   profundo y más cálido) porque el original se queda en 2,84:1 sobre blanco y
   no sirve ni como borde. gold-500 es su gemelo en pantalla (ΔE OKLab 0,02);
   gold-600 baja un escalón para cruzar el 3:1 sobre toda superficie clara.

   Los componentes usan los tokens SEMÁNTICOS, nunca las primitivas.
   ========================================================================= */

:root {
    color-scheme: light dark;

    /* ======================================================================
       1. PRIMITIVAS — escalas. No usar directamente en componentes.
       ====================================================================== */

    /* Dorado de marca: el valor exacto del logotipo definitivo. Está a
       ΔE OKLab 0,015 de --gold-500, o sea que en pantalla son el mismo color;
       se conserva nombrado para piezas donde la marca manda sobre el sistema
       (artes finales, OG images, impresión). En interfaz se usa la escala. */
    --gold-brand: #BE9D35;

    /* Dorado. Torsión de tono: los claros viran a oro pálido (H 92°), los
       oscuros a bronce (H 69°). Es el comportamiento del metal real y evita
       el aspecto plano de mostaza de una rampa de tono constante. */
    --gold-25: #FDFAF0;
    --gold-50: #FBF4E1;
    --gold-100: #F6EBCA;
    --gold-200: #EDDAA7;
    --gold-300: #E0C47B;
    --gold-400: #CEAA50;
    --gold-500: #C0983A;
    --gold-600: #AD8522;
    --gold-700: #8A6516;
    --gold-800: #6B4905;
    --gold-900: #4E3307;
    --gold-950: #2C1A04;

    /* Neutros cálidos. Croma 0,01 en la familia de tono del oro: ningún gris
       se lee frío junto al dorado. */
    --warm-0: #FFFFFF;
    --warm-25: #FBFAF7;
    --warm-50: #F6F4F0;
    --warm-100: #EDEBE5;
    --warm-200: #DFDCD5;
    --warm-300: #CBC7BF;
    --warm-400: #A29E95;
    --warm-500: #817D74;
    --warm-600: #67635A;
    --warm-700: #4E4A43;
    --warm-800: #34302A;
    --warm-900: #201C17;
    --warm-950: #14110D;

    /* Rojo funcional. Tono cálido (H 28°) para no pelear con el oro. */
    --red-50: #FCECE9;
    --red-100: #FBDAD5;
    --red-400: #E47D70;
    /* solo modo oscuro: el red-600 se queda en 3,5:1 sobre tinta */
    --red-600: #B7453B;
    --red-700: #9E2D26;
    --red-800: #7E1F1A;

    /* ======================================================================
       2. SEMÁNTICOS — lo único que deben consumir los componentes.
       Los ratios anotados están calculados, no estimados.
       ====================================================================== */

    /* Superficies */
    --surface-page: #F6F4EE;
    /* papel cálido, fondo del site */
    --surface-card: #FFFDF8;
    /* crema, tarjetas y cuerpo editorial */
    --surface-raised: var(--warm-0);
    --surface-offset: var(--warm-50);
    --surface-accent: var(--gold-50);
    /* Fondo de la foto de producto (lanzamientos): blanco SIEMPRE, también en
       modo oscuro, porque la foto llega recortada sobre blanco y la caja tiene
       que fundirse con ella. Por eso no se redefine en los temas oscuros. */
    --surface-packshot: var(--warm-0);
    /* destacados, callouts, tags */
    --surface-ink: var(--warm-950);
    /* módulos oscuros: Privel, autopromo, paywall */

    /* Texto sobre superficie clara */
    --text-strong: var(--warm-950);
    /* titulares */
    --text-body: var(--warm-800);
    /* cuerpo — 11,9:1 sobre papel */
    --text-dim: var(--warm-600);
    /* secundario — 5,4:1 sobre papel */
    --text-body-soft: var(--warm-700);
    /* cuerpo secundario — 8,0:1 sobre papel */
    --text-faint: var(--warm-500);
    /* solo ≥19px o no informativo — 3,7:1 */

    /* Texto sobre superficie oscura */
    --text-on-ink: var(--warm-100);
    /* 15,8:1 */
    --text-dim-on-ink: var(--warm-300);
    /* 11,2:1 */
    --accent-on-ink: var(--gold-400);
    /* 8,5:1 — el --link claro (gold-700) se queda en 3,5:1 sobre tinta */
    --surface-chip-on-ink: rgba(255, 255, 255, 0.13);
    --border-on-ink: rgba(255, 255, 255, 0.12);
    /* filete dentro de un módulo de tinta: velo, no un gris, para que valga
       sobre la tinta clara y sobre la elevada del modo oscuro */
    /* velo sobre módulo oscuro; se invierte en modo oscuro, donde el módulo
       ya es una superficie clara y aclararlo más hundiría el contraste */

    /* Bordes */
    --border-hair-soft: var(--warm-100);
    --border-hair: var(--warm-200);
    --border-strong: var(--warm-300);
    --border-accent: var(--gold-600);
    /* funcional, 3,1:1 sobre papel */
    --border-accent-soft: var(--gold-200);
    /* filete dorado decorativo */

    /* Acción. Dos niveles, y la diferencia no es decorativa: el relleno dorado
       claro solo admite rótulo en tinta, y el oscuro solo rótulo claro. Tener
       los dos evita además que la portada se llene de dorado saturado. */
    --action: var(--gold-600);
    /* CTA de conversión: relleno dorado + rótulo tinta, 5,5:1 */
    --action-ink: var(--warm-950);
    /* NUNCA blanco sobre --action: 3,4:1 */
    --action-hover: var(--gold-700);
    --action-strong: var(--gold-800);
    /* acción recurrente: relleno oscuro + rótulo claro, 7,9:1 */
    --action-strong-ink: var(--warm-0);
    --action-strong-hover: var(--gold-700);
    /* hover del relleno oscuro: el rótulo claro sigue en 5,3:1. No sirve
       --action-hover, que en oscuro es un dorado claro (2,2:1 con blanco) */
    --action-on-ink: var(--gold-500);
    /* CTA sobre superficie oscura */

    /* Acento decorativo sobre superficie clara: filetes, barras, bordes de cita
       y rellenos de hover. No apto para texto (2,0:1). */
    --accent-soft: var(--gold-400);

    /* Enlaces. El subrayado grueso es el portador real de la señal: el dorado
       y la crema son tonos vecinos y el color solo no basta. */
    --link: var(--gold-700);
    /* 4,8:1 sobre papel */
    --link-hover: var(--gold-800);
    /* 7,4:1 sobre papel, 8,0:1 sobre crema */
    --link-underline: var(--gold-400);

    /* Foco de teclado (WCAG 2.4.11) */
    --focus: var(--gold-800);
    /* 7,4:1 sobre papel */
    --focus-on-ink: var(--gold-300);
    --focus-halo: var(--warm-0);
    --focus-ring: var(--focus);
    /* color efectivo del anillo; los módulos oscuros lo redeclaran */

    /* Feedback. Éxito sin color: tinta + glifo ✓ + texto (WCAG 1.4.1). */
    --danger: var(--red-700);
    /* 6,7:1 sobre papel */
    --danger-surface: var(--red-50);
    --danger-border: var(--red-600);

    /* Mapa mundial. Dos estados, no gradiente: en monocromo los tramos
       contiguos de una escala secuencial se quedan en 1,4–2,3:1. La densidad
       la lleva la lista del módulo, no el color. */
    --map-empty: var(--warm-100);
    --map-filled: var(--gold-700);
    /* 4,5:1 contra vacío */
    --map-selected: var(--warm-950);
    /* 3,6:1 contra relleno */
    --map-stroke: var(--surface-page);

    /* Gradiente de mancheta. Tres paradas: con cuatro aparecía banding en
       paneles de 6 bits. Es DECORATIVO (filete de 5 px): su rango de luminosidad
       es demasiado amplio para llevar texto encima. */
    --gradient-mancheta: linear-gradient(100deg, var(--gold-300) 0%, var(--gold-500) 45%, var(--gold-700) 100%);

    /* Gradiente para superficies doradas que SÍ llevan texto: rango estrecho,
       de modo que la tinta cumple AA en cualquier punto de la banda (8,5:1 en
       el peor caso, contra 2,5:1 si se reutiliza el de la mancheta). */
    --gradient-gold-surface: linear-gradient(100deg, var(--gold-200) 0%, var(--gold-400) 100%);

    /* Controles nativos (checkbox, radio, range) — evita el azul del navegador */
    accent-color: var(--action);

    /* --- TYPOGRAPHY --- */
    --font-family-serif: 'Cormorant Garamond', 'PT Serif', Georgia, serif;
    --font-family-sans: 'Manrope', 'PT Sans', Arial, sans-serif;

    /* Fluid Type Scale */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8rem);
    --font-size-sm: clamp(0.875rem, 0.85rem + 0.125vw, 0.9rem);
    --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
    --font-size-md: clamp(1.2rem, 1.1rem + 0.5vw, 1.35rem);
    --font-size-lg: clamp(1.5rem, 1.35rem + 0.75vw, 1.8rem);
    --font-size-xl: clamp(2rem, 1.8rem + 1vw, 2.5rem);
    --font-size-xxl: clamp(2.5rem, 2.2rem + 1.5vw, 3.5rem);

    --line-height-tight: 1.1;
    --line-height-base: 1.5;
    --line-height-loose: 1.8;

    /* --- SPACING --- */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-2xl: 5rem;

    /* --- LAYOUT --- */
    --container-max-width: 1200px;
    --grid-gap: var(--space-m);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Alto real de la cabecera sticky (mancheta 4px + barra ~76px) más aire.
       Una sola cifra para todo lo que tiene que quedar por debajo de ella:
       scroll-margin de anclas y foco, índice sticky del informe, sumario. */
    --header-offset: 5.5rem;

    /* --- CAPAS ---
       Escala corta y con nombre: un z-index suelto (9999, 10000) acaba en una
       carrera de números que nadie sabe ordenar. */
    --z-raised: 1;
    --z-dropdown: 100;
    --z-sticky: 1000;
    --z-mancheta: 1001;
    --z-toast: 1100;
    --z-overlay: 1200;

    /* --- LECTURA ---
       Lo que de verdad pinta el cuerpo del detalle (pages/detalle.css .abody):
       Manrope 1.125rem / 1.7 a 70ch. Se eligió sans y no la serif de identidad
       porque la Cormorant tiene un ojo medio muy pequeño y a tamaño de cuerpo se
       lee como 2px menos; 70ch a 18px son ~69 caracteres por línea en escritorio. */
    --reading-max-width: 70ch;
    /* Ancho de la COLUMNA que contiene la lectura (titular, metadatos, cuerpo),
       medido en el ch de su propio tamaño de letra: un poco más ancha que la
       medida del cuerpo para que titulares y figuras respiren. */
    --reading-column: 75ch;
    --reading-font-size: 1.125rem;
    --reading-line-height: 1.7;

    /* --- SHADOWS --- */
    /* Sombras en tinta cálida, no en negro puro: sobre crema, el negro neutro
       introduce un halo frío que rompe la familia. */
    --shadow-sm: 0 1px 3px rgba(20, 17, 13, 0.10);
    --shadow-md: 0 4px 6px -1px rgba(20, 17, 13, 0.10), 0 2px 4px -1px rgba(20, 17, 13, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(20, 17, 13, 0.10), 0 4px 6px -2px rgba(20, 17, 13, 0.05);
    /* elevación de tarjeta enlazada al pasar por encima */
    --shadow-hover: 0 12px 32px rgba(20, 17, 13, 0.15);
}

/* ============================================================================
   MODO OSCURO
   Solo se redeclaran los tokens SEMÁNTICOS. Ni un componente cambia: esa es
   toda la razón de que existan. Las escalas primitivas no se tocan.

   Tres decisiones que no son un simple "invertir":
   · El dorado sube dos escalones (el gold-700 de los enlaces da 2,2:1 sobre
     tinta). Sobre oscuro trabaja la mitad clara de la escala.
   · --surface-ink deja de ser "más oscuro que la página" y pasa a ser MÁS
     CLARO: en oscuro, un módulo destacado se separa elevándose, no hundiéndose.
   · --action-strong no puede ser un relleno oscuro sobre una página oscura;
     sube a gold-700, que mantiene el rótulo claro y 3,5:1 contra el fondo.

   Ratios verificados sobre las tres superficies oscuras reales.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        /* Superficies: la elevación va hacia la luz */
        --surface-page: var(--warm-950);
        --surface-card: var(--warm-900);
        --surface-raised: var(--warm-800);
        --surface-offset: var(--warm-900);
        --surface-accent: var(--gold-950);
        --surface-ink: var(--warm-800);
        /* módulo destacado = superficie elevada */

        /* Texto */
        --text-strong: var(--warm-50);
        /* 17,1:1 */
        --text-body: var(--warm-200);
        /* 13,7:1 */
        --text-body-soft: var(--warm-300);
        --text-dim: var(--warm-400);
        /* 6,3:1 sobre tarjeta */
        --text-faint: var(--warm-500);
        --text-on-ink: var(--warm-100);
        --text-dim-on-ink: var(--warm-300);
        --accent-on-ink: var(--gold-400);
        --surface-chip-on-ink: rgba(0, 0, 0, 0.28);
        --border-on-ink: rgba(255, 255, 255, 0.14);

        /* Acción. El patrón "relleno dorado + rótulo tinta" aguanta igual de
           bien en oscuro; el que hay que rehacer es el relleno oscuro. */
        --action: var(--gold-500);
        --action-ink: var(--warm-950);
        /* 6,99:1 */
        --action-hover: var(--gold-400);
        --action-strong: var(--gold-700);
        /* 3,5:1 contra la página */
        --action-strong-ink: var(--warm-0);
        /* 5,3:1 */
        --action-strong-hover: var(--gold-800);
        /* oscurece en vez de aclarar: rótulo claro a 8,1:1 */
        --action-on-ink: var(--gold-500);

        /* Enlaces y foco */
        --link: var(--gold-400);
        /* 7,7:1 sobre tarjeta */
        --link-hover: var(--gold-300);
        --link-underline: var(--gold-600);
        --focus: var(--gold-300);
        /* 11,1:1 */
        --focus-on-ink: var(--gold-300);
        --focus-halo: var(--warm-950);

        /* Bordes */
        --border-hair-soft: var(--warm-900);
        --border-hair: var(--warm-800);
        --border-strong: var(--warm-700);
        --border-accent: var(--gold-600);
        /* 5,5:1 */
        --border-accent-soft: var(--gold-800);
        --accent-soft: var(--gold-600);

        /* Feedback */
        --danger: var(--red-400);
        /* 6,7:1 */
        --danger-surface: #3F1C18;
        --danger-border: var(--red-400);

        /* Mapa: el relleno baja a gold-600 para que el país seleccionado en
           blanco despegue de él (3,4:1); en claro no hacía falta. */
        --map-empty: var(--warm-800);
        --map-filled: var(--gold-600);
        --map-selected: var(--warm-0);
        --map-stroke: var(--warm-950);

        /* La banda dorada es de las pocas superficies que se mantienen claras en
           oscuro (es un promocional, va a voz alta). Baja un escalón para no
           deslumbrar; la tinta encima sigue en 6,99:1 en su punto más oscuro. */
        --gradient-gold-surface: linear-gradient(100deg, var(--gold-300) 0%, var(--gold-500) 100%);

        /* Sobre fondo oscuro una sombra no se ve: la elevación la dan las
           superficies, y la sombra solo asienta el elemento. */
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.6);
        --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.7);
        --shadow-hover: 0 14px 32px -6px rgba(0, 0, 0, 0.6);
    }

    /* El logotipo de Alimarket es un SVG sin `fill`: se pinta en negro y
       desaparecería. Es monocromo, así que invertirlo basta. La regla va por
       clase y no por sitio: el logo aparece en la cabecera y en la tarjeta de
       login, y apuntando a una sola de las dos la otra quedaba negra sobre
       fondo oscuro. */
    .logo-alimarket {
        filter: invert(1);
    }

    /* Fotografías e imágenes de portada: un punto menos de brillo para que no
       deslumbren contra la página oscura. */
    .mp-report__media img,
    .card__image img,
    .mp-issue__cover img {
        filter: brightness(0.92);
    }
}