/* Tokens de diseño — ver VISUAL_STYLE.md */
:root {
  /* Paleta base */
  --pergamino: #EFE3C8;
  --pergamino-claro: #F8F0DE;
  --pergamino-oscuro: #E2D1AC;
  --tinta: #3B2A1E;          /* sepia: reemplaza al negro */
  --tinta-suave: #6B5444;
  --lapislazuli: #2C4A7A;    /* acción principal */
  --lapislazuli-oscuro: #1F365C;
  --oro: #C9952F;            /* puntos, dorados */
  --oro-claro: #E9C46A;
  --granada: #A63A2B;        /* corazones */
  --oliva: #5F6E2E;          /* acierto */
  --oliva-claro: #E4E8C8;
  --terracota: #B5553A;

  /* Color del capítulo (se sobrescribe por pantalla o carta) */
  --cat: var(--lapislazuli);
  --cat-tinta: #FFF8EA;

  /* Tipografía */
  --f-titulo: 'Alegreya SC', 'Alegreya', Georgia, 'Times New Roman', serif;
  --f-display: 'Alegreya', Georgia, 'Times New Roman', serif;
  --f-texto: 'Andika', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;

  /* Escala tipográfica (razón 1.25) */
  --t-xs: .8rem;
  --t-sm: .9rem;
  --t-md: 1.0625rem;
  --t-lg: 1.3rem;
  --t-xl: 1.65rem;
  --t-2xl: 2.1rem;
  --t-3xl: clamp(2.2rem, 6vw, 3.4rem);

  /* Espaciado */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem;

  /* Forma y profundidad */
  --r-carta: 18px;
  --r-boton: 999px;
  --r-panel: 14px;
  --sombra-carta: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 34px -18px rgba(59, 42, 30, .55), 0 3px 8px -4px rgba(59, 42, 30, .35);
  --sombra-boton: 0 3px 0 var(--lapislazuli-oscuro);
  --foco: 0 0 0 3px var(--pergamino-claro), 0 0 0 6px var(--oro);

  --gutter: max(16px, env(safe-area-inset-left));
  --ancho: 1120px;
  --hud-alto: 60px;
  --tab-alto: 64px;
}