/* ==========================================================================
   tokens.css — Variables de diseño de ByCar
   --------------------------------------------------------------------------
   Es el ÚNICO lugar donde se definen colores, tipografías y medidas.
   Para cambiar la paleta de toda la web, se edita acá y nada más.

   Colores sacados del PDF de marca (muestras reales):
     crema   #F0E7E0 · oliva #77743F · oliva profundo #5D5E37 · rosa #EBC8DC
   ========================================================================== */

:root {
  /* ---- Paleta de marca ---- */
  --c-cream: #F0E7E0;        /* fondo principal */
  --c-paper: #FAF6F2;        /* crema más clara, para tarjetas */
  --c-olive: #77743F;
  --c-olive-deep: #5D5E37;   /* fondos oscuros (hero, configurador, footer) */
  --c-rose: #EBC8DC;
  --c-rose-deep: #9C4F78;    /* rosa oscuro: texto/acentos sobre crema (contraste AA) */
  --c-ink: #26241B;          /* texto principal */
  --c-ink-soft: #3A372A;     /* texto secundario */
  --c-line: rgba(38, 36, 27, .16);
  --c-ok: #3F6B3A;
  --c-error: #A3342B;

  /* ---- Tipografía ---- */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Base de 18px: pensada para que se lea cómodo de los 18 a los 70 años */
  --fs-body: 1.125rem;
  --fs-small: .95rem;
  --fs-lead: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --fs-h3: clamp(1.35rem, 1.2rem + .6vw, 1.75rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --fs-h1: clamp(2.4rem, 1.5rem + 4vw, 4.6rem);

  /* ---- Espaciado y forma ---- */
  --space-section: clamp(4.5rem, 3rem + 6vw, 8rem);
  --container: 1800px;
  --gutter: clamp(1.25rem, 3vw, 3rem);
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --tap: 52px;               /* alto mínimo de botones: fácil de tocar */

  /* ---- Movimiento ---- */
  /* Curvas de movimiento (más "con carácter" que las que trae CSS):
     out    = entradas y respuestas rápidas · in-out = movimiento dentro de la pantalla · drawer = paneles laterales */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease: var(--ease-out);               /* atajo: el resto del CSS usa esta */
  --header-h: 76px;
}