/* ==========================================================================
   Sistema de diseño «biblioteca de noche»: tokens
   Oscuro por defecto (se estudia de noche, en el móvil). Modo claro «papel».
   Todo color, medida y movimiento de la app sale de estas variables.
   ========================================================================== */

:root {
  /* Color: oscuro */
  --ink: #0F1614;
  --surface: #161F1C;
  --surface-2: #1D2824;
  --line: rgba(236, 230, 218, 0.10);
  --line-strong: rgba(236, 230, 218, 0.22);
  --text: #ECE6DA;
  --text-muted: #9FAFA7;
  --brass: #C9A36A;
  --brass-soft: rgba(201, 163, 106, 0.16);
  --brass-text: #C9A36A;      /* latón para texto pequeño (AA garantizado en ambos temas) */
  --pine: #3E8C77;
  --pine-text: #6FBFA8;
  --pine-soft: rgba(62, 140, 119, 0.18);
  --clay: #C4553D;
  --clay-text: #E58A73;
  --clay-soft: rgba(196, 85, 61, 0.16);
  --mist: #8FA39B;
  --on-solid: #0F1614;
  --scrim: rgba(8, 12, 11, 0.72);
  --grain-opacity: 0.05;
  color-scheme: dark;

  /* Tipografía */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-21: 1.3125rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-72: 4.5rem;

  /* Espaciado 4/8/12/16/24/32/48/72 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;

  /* Forma */
  --r-card: 14px;
  --r-field: 10px;
  --r-pill: 999px;
  --hair: 1px;

  /* Movimiento: 180–240 ms, ease-out */
  --t-fast: 180ms;
  --t-base: 240ms;
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

:root[data-theme="light"] {
  --ink: #F4EFE6;
  --surface: #FBF8F2;
  --surface-2: #EFE8DB;
  --line: rgba(15, 22, 20, 0.12);
  --line-strong: rgba(15, 22, 20, 0.28);
  --text: #17201D;
  --text-muted: #5C6B65;
  --brass: #8F6B33;
  --brass-soft: rgba(143, 107, 51, 0.14);
  --brass-text: #7A5B2A;      /* 5,5:1 sobre papel; #8F6B33 se queda para trazos y cifras grandes */
  --pine: #2F6F5E;
  --pine-text: #2A6354;
  --pine-soft: rgba(47, 111, 94, 0.13);
  --clay: #A8432F;
  --clay-text: #9A3B28;
  --clay-soft: rgba(168, 67, 47, 0.11);
  --mist: #6F827A;
  --on-solid: #F4EFE6;
  --scrim: rgba(23, 32, 29, 0.45);
  --grain-opacity: 0.035;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
  }
}