/* Tokens de diseño de BeeWell. Todo color, fuente y medida sale de aquí. */
:root {
  /* Marca (medidos del logo y de la moneda) */
  --amarillo-bee: #F5C400;
  --oro-well: #E5A500;
  --oro-claro: #FFE45C;
  --negro-bee: #111111;
  --blanco: #FFFFFF;

  /* Ambiente claro */
  --panal-suave: #FFF3BF;
  --gris-lectura: #F4F4F6;
  --tinta: #1B1636;

  /* Salón de juegos (oscuro) */
  --noche-colmena: #1C1744;
  --ciruela: #2E1F5E;

  /* Estados con significado */
  --turquesa: #19B5A5;
  --coral: #FF5E6C;

  /* Metal de los letreros de puertas */
  --laton: linear-gradient(145deg, #F3DB92, #C99A2E 55%, #F7E7A8);
  --plata: linear-gradient(145deg, #F7F8FB, #9AA3B2 55%, #E9ECF2);

  /* Derivados de uso común (mezclas de los tokens anteriores) */
  --tinta-suave: color-mix(in srgb, var(--tinta) 68%, var(--blanco));
  --linea: color-mix(in srgb, var(--tinta) 14%, var(--blanco));
  --amarillo-aclarado: color-mix(in srgb, var(--amarillo-bee) 82%, var(--blanco));

  /* Tipografía */
  --fuente-titulo: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --fuente-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fija: 14 / 16 / 20 / 28 / 40 / 64 */
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-20: 1.25rem;
  --t-28: 1.75rem;
  --t-40: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  --t-64: clamp(2.5rem, 1.6rem + 4vw, 4rem);

  /* Radios con jerarquía: pequeño (botones y campos), mediano (tarjetas), grande (modales) */
  --radio-s: 12px;
  --radio-m: 20px;
  --radio-l: 32px;

  /* Sombras con jerarquía */
  --sombra-s: 0 1px 2px rgb(27 22 54 / 0.12);
  --sombra-m: 0 6px 18px rgb(27 22 54 / 0.10);
  --sombra-l: 0 24px 60px rgb(27 22 54 / 0.28);

  /* Espaciado */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;

  /* Movimiento */
  --d-micro: 180ms;
  --d-pantalla: 500ms;
  --curva: cubic-bezier(0.22, 0.8, 0.3, 1);

  /* Medidas */
  --ancho-lectura: 70ch;
  --ancho-contenido: 1100px;
  --alto-toque: 44px;
}