/* ==========================================================================
   variables.css — Design tokens (LOCKED)
   ========================================================================== */

:root {
  /* --- Paleta: SOLO estas 6 --- */
  --forest-deep:   #0E2A1F;   /* hero, core values, footer, CTA final */
  --forest-medium: #1F3D2A;   /* cards oscuras, overlays sobre imagen */
  --lime-bright:   #B8E832;   /* CTAs, hot numbers, hover, acento puntual */
  --cream:         #F5F3EC;   /* fondo secciones claras */
  --graphite:      #141414;   /* body copy sobre crema */
  --label-gray:    #7A7A75;   /* eyebrows, meta info */

  /* Derivados de superficie (dentro del mismo sistema) */
  --cream-card:    #FBFAF5;   /* card sutil sobre crema (hot numbers) */

  /* --- Tipografía ---
     --font-display: grotesk neutral para headlines (look de la referencia).
     Mantengo el alias --font-serif apuntando al display para no romper referencias
     históricas en los CSS de sección. */
  --font-display: 'Schibsted Grotesk', 'Inter', -apple-system, sans-serif;
  --font-serif:   var(--font-display);
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Escala fluida (iter1: reducida, más editorial) --- */
  --fs-hero:        clamp(2.5rem, 4.5vw, 4rem);
  --fs-h2:          clamp(2rem, 3vw, 2.75rem);
  --fs-h3:          clamp(1.5rem, 2vw, 2rem);
  --fs-mega-number: clamp(3.75rem, 5.5vw, 5.5rem);
  --fs-body-large:  clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-body:        1rem;
  --fs-label:       0.75rem;

  /* --- Spacing y containers --- */
  --container-max:     1360px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --section-py:        clamp(5rem, 10vh, 8rem);

  /* --- Radios (shape lock: 20–24px cards, pill botones) --- */
  --radius-card: 24px;
  --radius-sm:   20px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}