/* ==========================================================================
   BUG CRAFT · TOKENS DEL SISTEMA DE DISEÑO
   Fuente: docs/guia-pantallas.md §1 y CLAUDE.md §5 (dirección F · Micromundo).
   Regla de oro: aquí solo hay interfaz. La ciencia (láminas, 3D, datos) no usa nada de esto.
   ========================================================================== */

/* --- Tipografías de la identidad (archivos locales, licencia OFL en public/fuentes) --- */
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fuentes/atkinson-hyperlegible-400.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fuentes/atkinson-hyperlegible-700.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fuentes/atkinson-hyperlegible-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fuentes/lilita-one-400.woff2') format('woff2'); }
@font-face { font-family: 'Bagel Fat One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fuentes/bagel-fat-one-400.woff2') format('woff2'); }

:root {
  /* --- Color (paleta F, guia §1.2) --- */
  --ciruela: #1E1033;          /* tinta, contorno y sombra dura */
  --crema: #FFF4D8;            /* papel */
  --blanco: #FFFFFF;           /* tarjetas y hojas */
  --maiz: #FFC600;             /* acción de avanzar y moneda */
  --maiz-claro: #FFD84A;
  --magenta: #F0148C;          /* acción fuerte */
  --magenta-claro: #FF5CB8;
  --pasto: #4CD137;            /* éxito, vida */
  --pasto-claro: #8CE86F;
  --turquesa: #00B8C4;         /* dato, opción A */
  --carmin: #D7192D;           /* alerta, daño */
  --naranja: #FF7A00;          /* épico, solo el jefe */
  --rosa: #FDE7F2;             /* fila propia, cofre abierto */
  --cielo: #7FD8FF;            /* fondo de juego */
  --cielo-claro: #CFF3FF;
  --bloque-verde: #2FBF4E;     /* cubos del mapa */
  --bloque-azul: #2F9BE0;

  /* --- Tipografía (solo estas tres) --- */
  --fuente-logo: 'Bagel Fat One', 'Lilita One', system-ui, sans-serif;
  --fuente-titulo: 'Lilita One', 'Bagel Fat One', system-ui, sans-serif;
  --fuente-texto: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;

  /* Escala con retícula de 8 pt: tamaño / interlínea */
  --t1: 12px; --l1: 16px;      /* etiqueta diminuta */
  --t2: 14px; --l2: 24px;      /* apoyo */
  --t3: 16px; --l3: 24px;      /* texto base */
  --t4: 20px; --l4: 32px;      /* subtítulo */
  --t5: 24px; --l5: 32px;      /* título de tarjeta */
  --t6: 32px; --l6: 40px;      /* título de pantalla */
  --t7: 40px; --l7: 48px;      /* cifra grande */

  /* --- Retícula de 8 pt --- */
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 32px; --e5: 40px; --e6: 48px; --e8: 64px;

  /* --- Formas --- */
  --r1: 12px; --r2: 16px; --r3: 20px; --r4: 28px; --r-pill: 999px;
  --borde: 3px solid var(--ciruela);
  --borde-fino: 2px solid var(--ciruela);
  --borde-grueso: 4px solid var(--ciruela);
  --sombra: 0 6px 0 var(--ciruela);          /* sombra plana de sticker */
  --sombra-corta: 0 4px 0 var(--ciruela);
  --sombra-pulsado: 0 2px 0 var(--ciruela);

  /* --- Movimiento --- */
  --t-rapido: 120ms;
  --t-medio: 220ms;
  --t-lento: 420ms;
  --curva-rebote: cubic-bezier(.2, 1.4, .4, 1);
  --curva-suave: cubic-bezier(.2, .8, .2, 1);

  /* --- Texto secundario sin gris: una tinta más clara del ciruela --- */
  --tinta-suave: rgba(30, 16, 51, .72);
  --tinta-tenue: rgba(30, 16, 51, .55);

  --ancho: 520px;
}

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--crema);
  color: var(--ciruela);
  font-family: var(--fuente-texto);
  font-size: var(--t3); line-height: var(--l3);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--fuente-titulo); font-weight: 400; line-height: 1.1; margin: 0; }
p { margin: 0; }
strong { font-weight: 700; }
a { color: var(--magenta); }
button { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* Fondo de papel con retícula de 16 px (maqueta 00e), a 8 pt */
.fondo-papel {
  background-color: var(--crema);
  background-image:
    linear-gradient(rgba(30, 16, 51, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 16, 51, .05) 1px, transparent 1px);
  background-size: 16px 16px;
}
/* Fondo de juego: cielo que se funde en crema */
.fondo-cielo { background: linear-gradient(var(--cielo), var(--cielo-claro) 62%, var(--crema)); }

/* Contenedor de pantalla (lo que luego será la app) */
.pantalla { max-width: var(--ancho); margin: 0 auto; padding: calc(var(--e3) + env(safe-area-inset-top)) var(--e3) calc(var(--e3) + env(safe-area-inset-bottom)); }

/* --- Utilidades de la retícula --- */
.pila { display: flex; flex-direction: column; gap: var(--e2); }
.fila { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.envolver { display: flex; flex-wrap: wrap; gap: var(--e1); }
.oculto { display: none !important; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Accesibilidad: nada de animación si el usuario lo pidió --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}