/* ============================================================
   ASTORO — Design Tokens
   Paleta basada en la identidad de marca (verde bosque + crema).
   Cambia solo estos valores para ajustar el estilo global del sitio.
   ============================================================ */
:root {
  /* Paleta principal (marca) */
  --color-green-900: #1b2620;
  --color-green-800: #22312a;
  --color-green-700: #2b3d33;
  --color-green-600: #3a5245;

  --color-cream-100: #faf7f0;
  --color-cream-200: #f2ecdf;
  --color-cream-300: #e8dfc9;

  /* Acento cálido (madera / cobre) — usado en CTAs y detalles */
  --color-accent-500: #b9784a;
  --color-accent-600: #9c6238;
  --color-accent-100: #e7c9a8;

  /* WhatsApp (uso exclusivo del botón/canal de WhatsApp) */
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1da851;

  /* Texto */
  --text-on-dark: var(--color-cream-100);
  --text-on-dark-muted: rgba(250, 247, 240, 0.72);
  --text-on-light: var(--color-green-900);
  --text-on-light-muted: rgba(27, 38, 32, 0.68);

  /* Tipografía */
  --font-heading: "Playfair Display", "Georgia", serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  /* Espaciado (escala 4px) */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.6rem;
  --space-4: 2.4rem;
  --space-5: 4rem;
  --space-6: 6.4rem;
  --space-7: 9.6rem;

  /* Layout */
  --container-max: 1180px;
  --container-padding: clamp(1.5rem, 5vw, 3rem);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-soft: 0 20px 40px -20px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 12px 30px -12px rgba(0, 0, 0, 0.25);

  /* Transiciones */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease);
  --transition-mid: 0.4s var(--ease);
  --transition-slow: 0.7s var(--ease);

  /* Z-index */
  --z-header: 100;
  --z-float: 90;
  --z-modal: 200;
}