/* =========================================
   TOKENS DEL REDISEÑO 2026
   Decididos el 16/10/2026 sobre la muestra de la fase 0:
   dirección A «papel y tinta», color azul, letra Newsreader + IBM Plex Mono.
   Reglas: skill de diseño Blinq v7, aplicado con la marca de Alkimia.
   Ninguna página lo carga todavía: la fase 1 lo enlaza antes de los
   componentes. Ningún color nuevo fuera de este archivo, salvo objetos
   físicos (portadas) y datos de una demo.
   Los contrastes de los comentarios son WCAG medidos sobre estos valores.
   ========================================= */
:root {
    /* Matiz de los neutros: el azul de la pluma del logo (#68C2ED). */
    --h: 205;

    /* PAPEL */
    --bg: hsl(var(--h) 6% 97%);        /* #F7F7F8, fondo general */
    --bg-2: #ffffff;                   /* superficie: las portadas se asientan aquí sin pedestal */
    --bg-3: hsl(var(--h) 7% 93%);      /* fondo alterno, para que no se repitan dos secciones seguidas */
    --line: hsl(var(--h) 8% 86%);      /* líneas de 1 px decorativas */
    --line-2: hsl(var(--h) 7% 56%);    /* bordes de campo y botón fantasma: 3,24:1 sobre --bg-2 */

    /* TEXTO */
    --text: hsl(214 30% 10%);          /* 16,64:1 sobre --bg */
    --text-2: hsl(210 9% 30%);         /* 8,01:1 */
    --text-3: hsl(210 7% 40%);         /* 5,43:1; 4,96:1 sobre --bg-3 */

    /* MARCA: un solo color, plano. Sin degradados, brillos ni texto degradado. */
    --brand: hsl(202 90% 30%);         /* #085F91; texto blanco encima: 6,87:1 */
    --brand-hover: hsl(202 90% 24%);
    --on-brand: #ffffff;
    --brand-text: hsl(202 90% 30%);    /* enlaces y cifras de marca: 6,41:1 sobre --bg */

    /* TINTA: una banda oscura por pantalla como máximo.
       Es el azul de la fachada de la sede (#3C598F) llevado a noche. */
    --ink: hsl(219 40% 12%);           /* #121B2B */
    --ink-text: hsl(210 25% 94%);      /* 15,06:1 sobre --ink */
    --ink-text-2: hsl(212 14% 72%);    /* 8,50:1 */
    --ink-line: hsl(219 22% 24%);
    --ink-line-2: hsl(219 16% 46%);
    --ink-brand: hsl(199 79% 67%);     /* #68C3ED, el azul del logo: 8,72:1 sobre --ink */
    --ink-brand-hover: hsl(199 79% 75%);
    --ink-on-brand: hsl(219 40% 10%);

    /* SELLO ALKIMIA: la única excepción al color único.
       Marca solo los libros propios; nunca botones, fondos ni texto. */
    --seal: hsl(42 72% 40%);           /* 3,44:1 sobre blanco, como gráfico */
    --seal-ink: hsl(42 67% 68%);       /* #E4C377, el dorado del óvalo del logo */
    --on-seal: #ffffff;

    /* SUPERFICIES ESPECIALES Y ESTADOS */
    --cover-ground: #ffffff;           /* las portadas del catálogo traen fondo blanco */
    --focus: hsl(202 90% 38%);
    --ok: hsl(150 55% 27%);
    --bad: hsl(0 66% 42%);

    /* Sombra solo para objetos físicos (portadas 3D), nunca para tarjetas.
       Es un valor de filter: se usa con `filter: var(--shadow-media)`. */
    --shadow-media: drop-shadow(0 1px 1px hsl(220 30% 8% / 0.22)) drop-shadow(0 10px 16px hsl(220 30% 6% / 0.3));

    /* TIPOGRAFÍA: una familia con eje óptico y una mono para microdatos
       (precios, ISBN, páginas, horario, dirección). */
    --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --fs-d1: clamp(2.4rem, 1.35rem + 3.6vw, 4.25rem);
    --fs-d2: clamp(1.85rem, 1.3rem + 1.9vw, 2.75rem);
    --fs-d3: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
    --fs-lede: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --fs-body: 1.0625rem;
    --fs-small: 0.9375rem;
    --fs-mono: 0.8125rem;
    --fs-label: 0.75rem;               /* piso: etiquetas en mayúsculas de 12 px */
    --lh-d1: 1.02;
    --lh-d2: 1.08;
    --lh-d3: 1.18;
    --lh-body: 1.6;
    --track-d1: -0.022em;
    --track-d2: -0.016em;
    --track-d3: -0.01em;
    --track-label: 0.08em;

    /* FORMA: radios 4/6/10/12 y nada de píldoras */
    --r-4: 4px;
    --r-6: 6px;
    --r-10: 10px;
    --r-12: 12px;
    --btn-h: 48px;
    --tap: 44px;                       /* zona táctil mínima */
    --stroke-icon: 1.75;

    /* RITMO */
    --section-y: clamp(64px, 3.5rem + 3.5vw, 104px);
    --container: 1120px;

    /* MOVIMIENTO: por propiedad, nunca `transition: all` */
    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-hover: 140ms;
    --dur-press: 90ms;

    color-scheme: light;
}

/* La banda de tinta reasigna los tokens: dentro de ella los componentes
   se ven bien sin clases propias. */
.band--ink {
    --bg: var(--ink);
    --text: var(--ink-text);
    --text-2: var(--ink-text-2);
    --text-3: var(--ink-text-2);
    --line: var(--ink-line);
    --line-2: var(--ink-line-2);
    --brand: var(--ink-brand);
    --brand-hover: var(--ink-brand-hover);
    --on-brand: var(--ink-on-brand);
    --brand-text: var(--ink-brand);
    --seal: var(--seal-ink);
    --focus: var(--ink-brand);
    background: var(--ink);
    color: var(--ink-text);
}