/* ============================================================
   Design tokens — "Petróleo & tinta" (editorial, cool, alto contraste)
   Serif display (Fraunces) + Sans body (Inter)
   Paleta: hueso neutro + tinta casi-negra + acento petróleo
   ============================================================ */

:root {
  /* ---- Color: base / tinta (neutros fríos, NO crema) ---- */
  --paper:        #F2F2EF;  /* fondo principal, hueso neutro frío */
  --paper-2:      #E7E8E3;  /* fondo de sección alterna */
  --paper-3:      #DCDED7;  /* superficies */
  --ink:          #15181C;  /* texto principal, casi negro frío */
  --ink-2:        #33373D;  /* texto secundario fuerte */
  --muted:        #676B70;  /* texto tenue */
  --line:         #D8D9D1;  /* hairlines */
  --line-strong:  #C3C5BB;

  /* ---- Color: acento petróleo (guiño buceo) ---- */
  --clay:         #0C555E;  /* acento principal (petróleo profundo) */
  --clay-deep:    #063B42;
  --clay-soft:    #4E8A90;
  --ocean:        #0C555E;  /* alias del acento */
  --gold:         #B0894A;  /* detalle cálido puntual (casi sin uso) */

  /* ---- Superficies oscuras (footer / bloque de cierre) ---- */
  --ink-bg:       #101619;
  --ink-bg-2:     #161E21;
  --hero-bg:      #090907;  /* = fondo exacto de la foto del hero (fusión sin costura) */
  --accent-bright:#5FB2B5;  /* acento teal luminoso para textos sobre fondo oscuro */

  /* ---- Tipografía ---- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala de tipo fluida (clamp: min / preferida / max) */
  --fs-eyebrow: 0.78rem;
  --fs-body:    clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --fs-lead:    clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-h2:      clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --fs-h1:      clamp(2.6rem, 1.9rem + 3.4vw, 5rem);
  --fs-mega:    clamp(3rem, 2rem + 5vw, 6.5rem);

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.65;

  /* Tracking */
  --tr-eyebrow: 0.18em;
  --tr-tight:  -0.02em;

  /* ---- Espaciado (base 4px) ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* ---- Layout ---- */
  --container: 1120px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ---- Radios ---- */
  --r-sm: 6px;   --r-md: 12px;  --r-lg: 20px;  --r-pill: 999px;

  /* ---- Sombras (suaves, editoriales) ---- */
  --sh-sm: 0 1px 2px rgba(21, 24, 28, 0.05);
  --sh-md: 0 12px 30px -18px rgba(21, 24, 28, 0.30);
  --sh-lg: 0 30px 60px -30px rgba(21, 24, 28, 0.40);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 240ms;
}