/* =========================================================
   TOKENS — toda la identidad visual se controla desde aquí.
   Cambia estas 7 variables de color y la página entera cambia.
   ========================================================= */
:root {
  /* Paleta base */
  --color-bg: #0f0e0d;          /* fondo principal (oscuro) */
  --color-bg-alt: #ebe6dd;      /* fondo alterno (claro, capítulos pares) */
  --color-text: #f2eee7;        /* texto sobre fondo oscuro */
  --color-text-muted: #8f897f;  /* texto secundario */
  --color-accent: #ef6478;      /* acento de marca */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Derivados — se calculan de la paleta, no hace falta editarlos */
  --color-line-dark: color-mix(in srgb, var(--color-text) 16%, transparent);
  --color-line-light: color-mix(in srgb, var(--color-bg) 18%, transparent);
  --color-scrim: color-mix(in srgb, var(--color-black) 78%, transparent);
  --color-scrim-soft: color-mix(in srgb, var(--color-black) 40%, transparent);
  --color-ph-1: color-mix(in srgb, var(--color-bg) 86%, var(--color-accent));
  --color-ph-2: color-mix(in srgb, var(--color-bg) 82%, var(--color-text));
  --color-ph-3: color-mix(in srgb, var(--color-bg-alt) 78%, var(--color-bg));
  --color-ph-4: color-mix(in srgb, var(--color-accent) 45%, var(--color-bg));

  /* Tipografía */
  --font-display: "Anton", "Bebas Neue", Impact, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-label: "Roboto Condensed", "Arial Narrow", sans-serif;

  --fs-mega: clamp(5rem, 17vw, 17rem);
  --fs-display: clamp(3.4rem, 11vw, 11rem);
  --fs-h2: clamp(2.3rem, 5.2vw, 5rem);
  --fs-statement: clamp(2rem, 4.8vw, 4.6rem);
  --fs-lead: clamp(1.35rem, 2.4vw, 2.25rem);
  --fs-sub: clamp(1.3rem, 2.2vw, 2rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-label: 0.72rem;

  /* Espaciado */
  --gutter: clamp(16px, 5vw, 88px);
  --gutter-r: var(--gutter);       /* se amplía en desktop para la navegación lateral */
  --gap: clamp(6px, 0.8vw, 12px);
  --space-s: clamp(24px, 3vw, 40px);
  --space-m: clamp(48px, 7vw, 112px);
  --space-l: clamp(88px, 12vw, 200px);
  --header-h: 88px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 300ms;
  --dur: 800ms;
  --dur-slow: 1200ms;
}

@media (min-width: 1024px) {
  :root { --gutter-r: max(var(--gutter), 112px); }
}

/* Temas por capítulo: cada <section data-theme="..."> redefine sus tintas */
[data-theme="dark"] {
  --surface: var(--color-bg);
  --ink: var(--color-text);
  --ink-muted: var(--color-text-muted);
  --line: var(--color-line-dark);
}

[data-theme="light"] {
  --surface: var(--color-bg-alt);
  --ink: var(--color-bg);
  --ink-muted: color-mix(in srgb, var(--color-bg) 68%, var(--color-bg-alt));
  --line: var(--color-line-light);
}

[data-theme="accent"] {
  --surface: var(--color-accent);
  --ink: var(--color-bg);
  --ink-muted: color-mix(in srgb, var(--color-bg) 72%, var(--color-accent));
  --line: var(--color-line-light);
}