/*
 * Martha Alles · tokens de marca (TASK-0002)
 *
 * Los valores de https://preview.kelgu.com/marthaalles/marca/tokens.css, la fuente de la maqueta
 * de la home v4. Es la única hoja del tema con colores escritos: v4.css usa sólo var(--…).
 * Quedan fuera --serif, --sans y --text (las familias de las piezas anteriores a la v3), que son de piezas
 * anteriores a la v3: el tema usa --font-display y --font-text.
 */

:root {
  /* Acentos de marca.
     --accent y --on-accent: lavanda para botones, etiquetas y detalles sobre fondos oscuros,
     con su texto encima.
     --accent-strong: violeta para enlaces, etiquetas y detalles sobre fondos claros.
     --ornament: dorado de las comillas de las citas. */
  --accent: #D6C1E0;
  --on-accent: #1a1420;
  --accent-strong: #6A4A96;
  --ornament: #C9A646;

  /* Fondos claros: secciones y tarjetas sobre texto oscuro.
     --bg: crema, fondo general de la página.
     --bg-sand: arena, sección de libros.
     --bg-lilac: lila, sección de recursos.
     --surface: blanco, cabecera, tarjetas y secciones neutras. */
  --bg: #F9F5EF;
  --bg-sand: #F5F0E6;
  --bg-lilac: #EEE7F4;
  --surface: #ffffff;

  /* Fondos oscuros: secciones con texto claro encima (--on-dark…).
     --bg-ink: casi negro, pie de página.
     --bg-night: negro del slider.
     --bg-plum, --bg-umber, --bg-navy: fondos de las slides de libros; --bg-plum también la
     sección de servicios y el panel del menú del celular. */
  --bg-ink: #1b1b1b;
  --bg-night: #0b0b0c;
  --bg-plum: #241A2C;
  --bg-umber: #1D1B18;
  --bg-navy: #14202A;

  /* Texto sobre fondos claros, de mayor a menor contraste.
     --ink: títulos y texto principal. --ink-soft: párrafos de apoyo.
     --ink-mute: metadatos y notas. */
  --ink: #1b1b1b;
  --ink-soft: #4a443e;
  --ink-mute: #5f5850;

  /* Texto sobre fondos oscuros. */
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255,255,255,.88);
  --on-dark-mute: rgba(255,255,255,.72);

  /* Líneas y bordes.
     --line: bordes de chips y botones secundarios sobre fondo claro.
     --line-soft: separadores de listas sobre fondo claro.
     --line-on-dark: separadores sobre fondo oscuro. */
  --line: #E0D6C8;
  --line-soft: #E6DED2;
  --line-on-dark: rgba(255,255,255,.35);

  /* Derivados de los de arriba (sin colores nuevos: cada uno mezcla un token con transparencia
     o con otro token).
     --on-dark-faint / --on-dark-ghost: fondos tenues sobre oscuro (hover de tarjetas).
     --line-on-dark-soft: separadores finos sobre fondo oscuro (panel del menú, pie).
     --line-on-dark-strong: borde del botón fantasma sobre fondo oscuro.
     --accent-line: borde de las tarjetas sobre --bg-plum.
     --line-lilac: borde del campo de correo sobre --surface.
     --scrim…: velos negros.
     --shadow-…: sombras de las tapas, de la tarjeta de recursos y de la cabecera, teñidas con
     --bg-plum. */
  --on-dark-faint: color-mix(in srgb, var(--on-dark) 12%, transparent);
  --on-dark-ghost: color-mix(in srgb, var(--on-dark) 5%, transparent);
  --line-on-dark-soft: color-mix(in srgb, var(--on-dark) 20%, transparent);
  --line-on-dark-strong: color-mix(in srgb, var(--on-dark) 60%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 35%, transparent);
  --line-lilac: color-mix(in srgb, var(--accent-strong) 30%, var(--surface));
  --scrim-strong: color-mix(in srgb, var(--bg-night) 85%, transparent);
  --scrim: color-mix(in srgb, var(--bg-night) 60%, transparent);
  --scrim-soft: color-mix(in srgb, var(--bg-night) 35%, transparent);
  --scrim-faint: color-mix(in srgb, var(--bg-night) 8%, transparent);
  --scrim-none: color-mix(in srgb, var(--bg-night) 0%, transparent);
  --shadow-cover: 0 12px 24px color-mix(in srgb, var(--bg-plum) 22%, transparent);
  --shadow-cover-lift: 0 26px 40px color-mix(in srgb, var(--bg-plum) 26%, transparent);
  --shadow-card: 0 20px 48px color-mix(in srgb, var(--bg-plum) 10%, transparent);
  --shadow-slide-cover: 0 30px 60px color-mix(in srgb, var(--bg-night) 55%, transparent), 0 8px 18px color-mix(in srgb, var(--bg-night) 35%, transparent);
  --shadow-header: 0 8px 24px color-mix(in srgb, var(--bg-plum) 8%, transparent);
  --on-dark-quote: color-mix(in srgb, var(--on-dark) 92%, transparent);

  /* Velo sobre la página mientras el panel del menú del celular está abierto. */
  --scrim-menu: color-mix(in srgb, var(--bg-plum) 28%, transparent);

  /* Tipografías.
     --font-display: Newsreader, serif editorial con tamaños ópticos (eje opsz): títulos de
     sección, citas y cifras.
     --font-text: Inter, todo el texto, el nombre «Martha Alles», la navegación y los títulos de
     tarjetas.
     --weight-…: los pesos que se cargan de cada una. */
  --font-display: 'Newsreader', Georgia, serif;
  --font-text: 'Inter', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Espaciado.
     --pad-x: margen lateral amplio; baja en tablet y celular. */
  --pad-x: 120px;
}

/* Tablet */
@media (max-width: 1100px) {
  :root { --pad-x: 72px; }
}

/* Celular */
@media (max-width: 760px) {
  :root { --pad-x: 24px; }
}