/* Design tokens — Sore Madé
   Paleta "bosque + hueso + ámbar": verde bosque como color de fondo/estructura,
   hueso (beige verdoso apagado) como fondo claro, y un único acento ámbar/naranja
   (el color real del logo del cliente) para botones, íconos y detalles.
   Cambiar estos valores actualiza toda la landing. */
:root {
  /* Color */
  --color-bg: #ECEEE4;
  --color-bg-soft: #E1E4D3;
  --color-surface: #FFFFFF;

  --color-forest: #2B3527;
  --color-forest-deep: #1C231A;
  --color-sage: #7E8D71;
  --color-sage-on-dark: #B9C2AC;

  --color-ink: #212B1F;
  --color-ink-soft: #55604D;
  --color-cream-text: #ECEEE4;

  --color-accent: #C1752E;
  --color-accent-dark: #8C551F;
  --color-accent-soft: #EFDCC0;
  --color-sand: #F6ECDC;

  --color-border: #D4D8C4;
  --color-star: #C1752E;

  /* Tipografía */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-script: "Caveat", cursive;
  --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.9rem;
  --fs-3xl: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  --fs-hero: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  --lh-tight: 1.15;
  --lh-normal: 1.65;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5rem;
  --space-8: 7rem;

  /* Layout — un único sistema de radios: botones/pills = 999px, tarjetas/fotos = 16px */
  --container-w: 1180px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(28, 35, 26, 0.10);
  --shadow-md: 0 10px 28px rgba(28, 35, 26, 0.12);
  --shadow-lg: 0 26px 60px rgba(28, 35, 26, 0.18);

  /* Movimiento: una sola curva de salida (rápida al empezar, se asienta suave) para que toda la web "se sienta" igual */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}