/* ============================================================
   LOS SAUCES — Design Tokens
   Sistema de diseño: color, tipografía, espaciado
   ============================================================ */

:root {
  /* ---- Color ---- */
  --verde-profundo: #0F1810;   /* fondo principal */
  --verde-profundo-2: #131F16; /* fondo secundario, ligeramente más claro */
  --verde-bosque: #354A2E;     /* verde del logo */
  --verde-medio: #5C6E4C;      /* hover, texto secundario en fondo oscuro */
  --dorado: #C4A15F;           /* acento único */
  --dorado-hover: #D9BA7C;
  --beige-natural: #EDE8DA;    /* texto principal en fondo oscuro */
  --beige-suave: #F5F2E9;      /* fondo de secciones claras */
  --tierra: #7A5C3E;           /* bordes, detalles madera/yute */
  --negro-sombra: #060905;

  --overlay-oscuro: rgba(6, 9, 5, 0.55);
  --linea-sutil: rgba(237, 232, 218, 0.14);
  --linea-dorada: rgba(196, 161, 95, 0.4);

  /* ---- Tipografía ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero: clamp(3rem, 8vw, 6.5rem);
  --fs-h1: clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.35rem);
  --fs-body: 1.05rem;
  --fs-small: 0.9rem;
  --fs-label: 0.85rem;

  --tracking-wide: 0.14em;
  --tracking-mid: 0.06em;

  --lh-tight: 1.1;
  --lh-normal: 1.6;

  /* ---- Espaciado ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 9rem;

  /* ---- Layout ---- */
  --max-width: 1400px;
  --radius-sm: 4px;
  --radius-md: 8px;

  /* ---- Transiciones ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s var(--ease);
  --transition-mid: 0.4s var(--ease);
}