/* ==========================================================================
   Tierra Luna — Design tokens
   Paleta cálida (nunca blancos ni negros puros). Fuente: design spec.
   ========================================================================== */

:root {
  /* Fondos */
  --tl-cream: #F4EDE1;        /* fondo crema principal */
  --tl-beige: #ECE2CF;        /* banda beige (beneficios, testimonios) */
  --tl-sand: #EFE6D6;         /* banda arena (rituales) */
  --tl-sand-footer: #EDE3D2;  /* footer claro (variante) */
  --tl-card: #FBF7EF;         /* tarjetas */
  --tl-card-soft: #F8F2E6;    /* tarjeta sobre banda oscura */
  --tl-photo-mat: #FDFBF7;    /* passe-partout de fotos */

  /* Marrones */
  --tl-ink: #3E2716;          /* marrón oscuro: títulos, banda CTA */
  --tl-brand: #4A2E1B;        /* marrón marca: botones, logo */
  --tl-brand-hover: #6B4526;  /* hover botón primario */
  --tl-espresso: #20130A;     /* near-black cálido: nav, footer, bandas oscuras */

  /* Texto */
  --tl-text: #5A3A22;         /* texto principal */
  --tl-text-2: #77604A;       /* texto secundario */
  --tl-text-muted: #8A6F55;   /* atenuado / captions */

  /* Dorados / acentos */
  --tl-gold: #A97C3F;         /* eyebrows, acentos */
  --tl-gold-light: #C9A365;   /* destellos, acentos claros */

  /* Cremas sobre oscuro */
  --tl-on-dark: #EFE3CF;
  --tl-on-dark-2: #F1E7D3;
  --tl-on-dark-strong: #F4EAD8;
  --tl-on-dark-soft: #DCC6A6;
  --tl-on-dark-muted: #9A7F5C;

  /* Estados / feedback */
  --tl-green: #567150;        /* disponible / comprar */
  --tl-green-hover: #45603F;
  --tl-whatsapp: #25D366;
  --tl-whatsapp-hover: #1FB855;
  --tl-error: #9B4A2F;

  /* Líneas */
  --tl-line: rgba(90, 58, 34, 0.12);
  --tl-line-strong: rgba(90, 58, 34, 0.25);
  --tl-line-on-dark: rgba(244, 237, 225, 0.12);
  --tl-gold-line: rgba(169, 124, 63, 0.45);

  /* Tipografía */
  --tl-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --tl-sans: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Formas */
  --tl-radius: 18px;
  --tl-radius-lg: 22px;
  --tl-pill: 999px;
  --tl-arch: 300px 300px 22px 22px; /* arco japonés */

  /* Sombras */
  --tl-shadow-card: 0 18px 40px rgba(62, 39, 22, 0.14);
  --tl-shadow-photo: 0 22px 44px rgba(62, 39, 22, 0.12);
  --tl-shadow-drawer: -20px 0 50px rgba(32, 19, 10, 0.32);

  /* Layout */
  --tl-maxw: 1220px;
  --tl-maxw-wide: 1280px;
  --tl-gutter: clamp(20px, 4vw, 40px);
  --tl-section-y: clamp(64px, 8vw, 110px);
}