/*
  Design tokens — Cabañas El Encanto
  Paleta de marca oficial entregada por el cliente (6 tonos): verde salvia
  #575D41, verde bosque oscuro #313622, crema #F5EAD8, café madera #68462D,
  arena #CAB192 y beige claro #E1CDB2. El resto de cada rampa (tintes y
  sombras) se interpola a partir de esos 6 anclas, no son inventados.
*/

:root {
  /* ---- Brand green (paleta oficial del cliente) ---- */
  --green-900: #313622; /* ancla: verde bosque oscuro */
  --green-800: #3a402a;
  --green-700: #444a32;
  --green-600: #4e5339;
  --green-500: #575d41; /* ancla: verde salvia, brand core */
  --green-400: #929684;
  --green-300: #bfc1b7;
  --green-100: #e6e7e2;
  --green-50: #f3f4f2;

  /* ---- Madera (paleta oficial del cliente) ---- */
  --wood-900: #2a1c12;
  --wood-800: #3e2a1b;
  --wood-700: #553925;
  --wood-600: #68462d; /* ancla: café madera */
  --wood-500: #8a6b50; /* aclarado para uso en botones/CTA, misma familia */
  --wood-400: #cab192; /* ancla: arena */
  --wood-100: #e1cdb2; /* ancla: beige claro */

  /* ---- Neutrals: cálidos, no blanco puro (madera / lienzo) ---- */
  --cream-50: #f5ead8; /* ancla: crema de la paleta oficial */
  --cream-100: #ecddc9;
  --cream-200: #e0ceb5;
  --ink-900: #14140f;
  --ink-800: #211f18;
  --ink-700: #3a3728;
  --ink-500: #6b6656;
  --ink-300: #a39d89;
  --white: #ffffff;

  /* ---- Type ---- */
  /* Una sola familia tipográfica en todo el sitio (la del navbar): Inter.
     Se conservan los dos nombres de token porque el resto del CSS los usa
     semánticamente (títulos vs. texto), pero ambos apuntan a la misma fuente. */
  --font-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --fs-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --fs-sm: clamp(0.9rem, 0.87rem + 0.2vw, 1rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --fs-md: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --fs-lg: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
  --fs-xl: clamp(2.1rem, 1.7rem + 1.8vw, 3.4rem);
  --fs-xxl: clamp(2.8rem, 2.1rem + 3.2vw, 5.2rem);

  /* ---- Spacing scale (8px base) ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.25rem;
  --sp-6: 3.5rem;
  --sp-7: 5.5rem;
  --sp-8: 8rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 10px rgba(20, 20, 15, 0.08);
  --shadow-md: 0 12px 32px -8px rgba(20, 20, 15, 0.22);
  --shadow-lg: 0 24px 64px -16px rgba(6, 41, 21, 0.35);

  /* ---- Semantic ---- */
  --color-bg: var(--cream-50);
  --color-surface: var(--white);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-500);
  --color-brand: var(--green-500);
  --color-brand-dark: var(--green-800);
  --color-cta: var(--wood-500);
  --color-cta-hover: var(--wood-600);
  --header-h: 84px;
}

/*
  Los tokens de espaciado grande (--sp-6/7/8) son valores fijos en rem, sin
  clamp() como el resto de la escala — .section usa --sp-8 (8rem = 128px)
  arriba Y abajo, así que dos secciones seguidas suman 256px de puro
  padding. En desktop se ve bien, pero en un celular de pantalla alta hace
  que el sitio se sienta excesivamente largo de scrollear. Se reducen aquí,
  no en cada sección — todo lo que usa estos tokens se ajusta solo.
*/
@media (max-width: 640px) {
  :root {
    --sp-6: 2.5rem;
    --sp-7: 3.75rem;
    --sp-8: 5rem;
  }
}