/* =============================================================
   base.css — Reset · Design tokens compartidos · Tipografía global
   ============================================================= */

/* === RESET === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === DESIGN TOKENS — idénticos en las tres páginas === */
:root {
  /* Colores compartidos */
  --cream:        #f4ede2;
  --cream-2:      #ebe1d1;
  --ink-soft:     #4a3d31;
  --copper-deep:  #8a3d1d;
  --burgundy:     #5c1f1a;
  --line:         #c7b89e;
  --line-soft:    #d9cdb6;

  /* Tipografía */
  --font-serif:   'Fraunces', serif;
  --font-sans:    'Inter Tight', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

/* === BASE GLOBAL === */
html, body {
  background:               var(--cream);
  color:                    var(--ink);   /* --ink se define en cada página */
  font-family:              var(--font-sans);
  -webkit-font-smoothing:   antialiased;
}

/* Textura de papel (propiedades comunes) — background-image y opacity se sobreescriben por página */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  /* SVG base (0.08) — usado por reserva y app; landing lo sobreescribe con 0.06 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* === HELPERS DE TIPOGRAFÍA === */
.display { font-family: var(--font-serif); }
.mono    { font-family: var(--font-mono); }