/* Ponte Bello · tokens del sistema visual (metodo/02-sistema-visual.md) */
:root {
  --fondo: #0a0806;
  --superficie: rgba(18, 14, 9, .8);
  --superficie-2: rgba(40, 30, 14, .82);
  --superficie-opaca: rgba(18, 14, 9, .88);   /* tarjetas, reserva y barra móvil: sin backdrop-filter sobre el canvas */
  --borde: rgba(242, 224, 190, .13);
  --texto: #f4ede1;
  --texto-2: #b3a68f;
  --oro: #e2b45c;
  --oro-claro: #f2c46d;
  --oro-hondo: #3a2a10;
  --sobre-oro: #1a1206;   /* texto sobre botones y chips dorados */
  --error: #f07a6b;
  --exito: #8fd19e;

  --serif: 'Cormorant', Georgia, serif;
  --sans: 'Montserrat', system-ui, sans-serif;
  --t1: .75rem; --t2: .875rem; --t3: 1rem; --t4: 1.125rem; --t5: 1.375rem;
  --t6: clamp(1.6rem, 3vw, 2rem); --t7: clamp(2.4rem, 6vw, 4.8rem);
  --t8: clamp(4.4rem, 13vw, 9.5rem); --t9: clamp(6rem, 24vw, 16rem);

  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 32px; --e5: 48px; --e6: 64px; --e7: 96px; --e8: 128px; --e9: 180px;
  --radio: 22px;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --sombra-texto: 0 1px 18px rgba(10, 8, 6, .9);   /* legibilidad sobre el humo */
  --ancho: min(1180px, 100% - 2 * clamp(20px, 5vw, 48px));
}