/* ==========================================================================
   TOKENS
   Un estilo (tema) solo define estos valores base. Todo lo demás se deriva.
   Los valores por defecto corresponden al estilo «Editorial clásico».
   JavaScript los sobrescribe en :root al aplicar un estilo (core/themes.js).
   ========================================================================== */
:root {
  /* --- Base del estilo --- */
  --bg: #F3EEE4;
  --surface: #FBF8F2;
  --ink: #221D18;
  --accent: #8C2F1F;
  --accent-ink: #FFFFFF;
  --woj: #A3261B;

  --hl-yellow: #F2CE5B;
  --hl-green: #9CCB8A;
  --hl-blue: #8DB8E0;
  --hl-red: #E99A93;
  --hl-purple: #BFA2DB;
  --hl-orange: #F0A868;

  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-reading: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui: "Instrument Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 10px;

  /* --- Derivados (no hace falta tocarlos) --- */
  --ink-2: color-mix(in oklab, var(--ink) 74%, var(--bg));
  --ink-3: color-mix(in oklab, var(--ink) 50%, var(--bg));
  --ink-4: color-mix(in oklab, var(--ink) 30%, var(--bg));
  --line: color-mix(in oklab, var(--ink) 11%, var(--bg));
  --line-2: color-mix(in oklab, var(--ink) 19%, var(--bg));
  --sunk: color-mix(in oklab, var(--ink) 4%, var(--bg));
  --raise: color-mix(in oklab, var(--surface) 70%, white 30%);
  --accent-2: color-mix(in oklab, var(--accent) 82%, var(--ink));
  --accent-soft: color-mix(in oklab, var(--accent) 11%, var(--surface));
  --accent-line: color-mix(in oklab, var(--accent) 35%, var(--bg));
  --overlay: color-mix(in oklab, var(--ink) 38%, transparent);

  --hl-alpha: 48%;
  --hl-yellow-bg: color-mix(in oklab, var(--hl-yellow) var(--hl-alpha), transparent);
  --hl-green-bg: color-mix(in oklab, var(--hl-green) var(--hl-alpha), transparent);
  --hl-blue-bg: color-mix(in oklab, var(--hl-blue) var(--hl-alpha), transparent);
  --hl-red-bg: color-mix(in oklab, var(--hl-red) var(--hl-alpha), transparent);
  --hl-purple-bg: color-mix(in oklab, var(--hl-purple) var(--hl-alpha), transparent);
  --hl-orange-bg: color-mix(in oklab, var(--hl-orange) var(--hl-alpha), transparent);

  --radius-sm: calc(var(--radius) * .6);
  --radius-lg: calc(var(--radius) * 1.6);
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent);
  --shadow-2: 0 2px 6px -1px color-mix(in oklab, var(--ink) 8%, transparent), 0 12px 32px -12px color-mix(in oklab, var(--ink) 18%, transparent);
  --shadow-3: 0 4px 12px -2px color-mix(in oklab, var(--ink) 10%, transparent), 0 32px 64px -24px color-mix(in oklab, var(--ink) 32%, transparent);

  /* --- Ritmo y escala --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --gutter: clamp(16px, 4vw, 56px);

  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-md: .9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
  --fs-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-3xl: clamp(2.6rem, 1.6rem + 4.4vw, 5.5rem);

  /* --- Lectura (controlado por Ajustes > Lectura) --- */
  --read-size: 19px;
  --read-leading: 1.75;
  --read-measure: 38em;

  /* --- Movimiento --- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 520ms;

  --rail-w: 232px;
  --tabbar-h: 0px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

:root[data-scheme="dark"] {
  color-scheme: dark;
  --raise: color-mix(in oklab, var(--surface) 88%, white 12%);
  --hl-alpha: 34%;
  --overlay: color-mix(in oklab, black 60%, transparent);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 2px 6px -1px rgb(0 0 0 / .35), 0 12px 32px -12px rgb(0 0 0 / .6);
  --shadow-3: 0 4px 12px -2px rgb(0 0 0 / .4), 0 32px 64px -24px rgb(0 0 0 / .75);
}

:root[data-reduce-motion="on"] {
  --dur-1: 0ms;
  --dur-2: 0ms;
  --dur-3: 0ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}