/* ════════════════════════════════════════════════════════
   variables.css
   Tokens globales de diseño.
   Editá acá y se propaga a todo el sitio.
   ════════════════════════════════════════════════════════ */

:root {

  /* ── Superficies ──────────────────────────────────────
     bg    : fondo general de página
     s0    : blanco puro (secciones "tarjeta")
     s1–s3 : grises cálidos progresivos
  ─────────────────────────────────────────────────────── */
  --bg:  #F4F2EE;
  --s0:  #FFFFFF;
  --s1:  #EDEAE4;
  --s2:  #E4E0D9;
  --s3:  #D6D1C8;

  /* Hero — gradiente de inicio */
  --hero-from: #EDE9E2;
  --hero-mid:  #F9F8F5;
  --hero-to:   #FFFFFF;

  /* ── Acento ───────────────────────────────────────────
     Cambiá --orange para cambiar TODO el color de marca
  ─────────────────────────────────────────────────────── */
  --orange:     #D95F0A;
  --orange-lt:  #F07020;
  --orange-dim: rgba(217,95,10,0.12);

  /* ── Texto ────────────────────────────────────────────
     t1: principal (casi negro)
     t2: secundario (gris medio)
     t3: hint / placeholder (gris claro)
  ─────────────────────────────────────────────────────── */
  --t1: #0E0C09;
  --t2: #5E5A54;
  --t3: #A8A39B;

  /* ── Bordes ───────────────────────────────────────────*/
  --border:   rgba(0,0,0,0.08);
  --border-h: rgba(0,0,0,0.16);

  /* ── Tipografía ───────────────────────────────────────
     fd : display condensado  (títulos grandes)
     fh : humanista sans      (cuerpo, UI)
     fm : monoespaciado       (labels, código)
  ─────────────────────────────────────────────────────── */
  --fd: 'Barlow Condensed', sans-serif;
  --fh: 'DM Sans', sans-serif;
  --fm: 'JetBrains Mono', monospace;

  /* ── Espaciado ────────────────────────────────────────
     --px : padding horizontal de sección
     --py : padding vertical de sección
  ─────────────────────────────────────────────────────── */
  --px: clamp(1.5rem, 5.5vw, 5.5rem);
  --py: clamp(5rem, 9vw, 8rem);

  /* ── Radios ───────────────────────────────────────────*/
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 8px;

  /* ── Nav ──────────────────────────────────────────────*/
  --nav-h: 68px; /* altura aproximada del nav fijo */
}