/* ============================================================
   De Dónde Es — tokens.css
   Identidad heredada del handoff de Shorts. Único tema (claro).
   ============================================================ */

/* --- Fuentes autoalojadas -----------------------------------
   Coloca los woff2 en /fonts. Subconjunto latin + latin-ext.
   Big Shoulders Display: instanciar estáticos 700 y 800 desde
   la variable (fonttools) y exportar a woff2.
------------------------------------------------------------- */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- Color: papel y tinta --- */
  --crema: #faf1e0;
  --crema-2: #f2e5cc;
  --kraft: #dcc099;
  --kraft-tinta: #b9975f;
  --tinta: #241f1b;
  --tinta-suave: #6b5f52;

  /* --- Color: acentos --- */
  --azul: #14485f;
  --turquesa: #2f8f8a;
  --terracota: #c1492a;
  --coral: #ea8244;
  --sol: #f4b73f;
  --sello: #5c3a86;

  /* --- Pilares --- */
  --pilar-lugares: #14485f;
  --pilar-naturaleza: #4a7a3c;
  --pilar-sabores: #c1492a;

  /* --- Semánticos --- */
  --fondo: var(--crema);
  --fondo-hundido: #f2e8d5;
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
  --borde: var(--tinta);
  --acierto: #2f6b3a;      /* verde profundo: AA sobre crema (7,1:1) */
  --acierto-papel: #e4efdc;
  --fallo: var(--terracota);
  --fallo-papel: #f7e2da;
  --foco: var(--sello);

  /* --- Tipografía --- */
  --f-titulo: "Big Shoulders Display", "Arial Narrow", "Haettenschweiler", sans-serif;
  --f-mano: "Caveat", "Segoe Script", cursive;
  --f-etiqueta: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-display: clamp(2.5rem, 11vw, 4.25rem);   /* 40 → 68 */
  --t-h1: clamp(2rem, 8vw, 3rem);              /* 32 → 48 */
  --t-h2: clamp(1.5rem, 6vw, 2.125rem);        /* 24 → 34 */
  --t-h3: 1.3125rem;                           /* 21 */
  --t-cuerpo: 1.0625rem;                       /* 17 */
  --t-cuerpo-lg: 1.1875rem;                    /* 19 */
  --t-mano: 1.375rem;                          /* 22 */
  --t-etiqueta: 0.8125rem;                     /* 13 */
  --t-micro: 0.75rem;                          /* 12 */

  --tr-etiqueta: 0.14em;   /* tracking de etiquetas y sellos */
  --tr-titulo: -0.005em;

  /* --- Espacio (escala de 4) --- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;
  --e-12: 48px; --e-16: 64px;

  /* --- Forma --- */
  --r: 8px;            /* radio estándar */
  --r-s: 6px;          /* notas y etiquetas */
  --r-pill: 999px;
  --b: 3px;            /* borde de pieza */
  --b-fuerte: 4px;     /* borde de pieza principal */

  /* --- Sombra: SIEMPRE dura, nunca desenfoque --- */
  --s-1: 4px 4px 0 rgba(20, 72, 95, 0.22);
  --s-2: 6px 6px 0 rgba(20, 72, 95, 0.26);
  --s-3: 8px 8px 0 rgba(20, 72, 95, 0.30);
  --s-sello: 4px 4px 0 rgba(92, 58, 134, 0.25);

  /* --- Medidas de layout --- */
  --ancho: 34rem;        /* columna de lectura/juego: 544px */
  --ancho-ancho: 60rem;  /* páginas de tabla y texto largo */
  --toque: 44px;         /* área táctil mínima */
  --barra-inf: 76px;     /* alto de la barra de acción fija */
}

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.001ms; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
:root { --dur: 160ms; }