/* ==========================================================================
   Aiforwork · Design tokens
   Sistema de diseño Aiforwork/ElevenLabs (bv4).
   Paleta: navy #2d3142 · surface #fff · bg #f5f5f5 · accent #3a4a5c
   Tipografía: EB Garamond (display) + Inter (body)
   ========================================================================== */

:root {
  /* ----- Marca / color ----- */
  --c-ink:        #2d3142; /* navy principal: texto, botón primario, secciones dark */
  --c-ink-soft:   #4f5d75;
  --c-teal:       #3a4a5c; /* acento de marca */
  --c-teal-700:   #2d3142;
  --c-teal-300:   #8b9bb4;
  --c-blue:       #3a4a5c; /* CTA/acentos */
  --c-blue-link:  #4f5d75;
  --c-blue-700:   #2d3142;

  /* ----- Neutros / superficies ----- */
  --c-bg:         #f5f5f5; /* fondo general */
  --c-white:      #ffffff;
  --c-surface:    #ffffff;
  --c-surface-2:  #f5f5f5;
  --c-sand:       #f5f2ef; /* warm stone */
  --c-sand-2:     #ede8e1;
  --c-border:     rgba(0,0,0,0.07);
  --c-border-soft: rgba(0,0,0,0.04);
  --c-line:       rgba(0,0,0,0.07);

  /* ----- Texto ----- */
  --t-primary:    #000000;
  --t-secondary:  #4e4e4e;
  --t-muted:      #777169;
  --t-on-dark:    #ffffff;
  --t-on-dark-soft: rgba(255,255,255,0.72);
  --t-on-teal:    rgba(255,255,255,0.90);

  /* ----- Tipografía ----- */
  --font-sans:    "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: "EB Garamond", Georgia, serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala de tamaños */
  --fs-display: clamp(2.6rem, 1.6rem + 3.4vw, 4rem);
  --fs-h1:      clamp(2.2rem, 1.5rem + 2.4vw, 3.25rem);
  --fs-h2:      clamp(1.7rem, 1.25rem + 1.6vw, 2.4rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  --fs-h4:      1.18rem;
  --fs-lead:    1.25rem;
  --fs-body:    1.0625rem;
  --fs-body-lg: 1.125rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.08;
  --lh-snug:  1.2;
  --lh-base:  1.6;

  --fw-book:    400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ----- Radios ----- */
  --r-pill: 999px;
  --r-xl:   28px;
  --r-lg:   18px;
  --r-md:   12px;
  --r-sm:   8px;
  --r-xs:   4px;

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

  /* ----- Sombras (bv4) ----- */
  --shadow-xs: rgba(0,0,0,0.05) 0 0 0 1px, rgba(0,0,0,0.03) 0 2px 12px;
  --shadow-sm: rgba(0,0,0,0.05) 0 0 0 1px, rgba(0,0,0,0.03) 0 2px 12px, rgba(78,50,23,0.03) 0 8px 32px;
  --shadow-md: rgba(0,0,0,0.07) 0 0 0 1px, rgba(0,0,0,0.06) 0 8px 24px;
  --shadow-lg: rgba(0,0,0,0.07) 0 0 0 1px, rgba(0,0,0,0.06) 0 8px 24px, rgba(78,50,23,0.05) 0 20px 56px;

  /* ----- Layout ----- */
  --container: 1200px;
  --container-narrow: 880px;
  --container-wide: 1320px;
  --gutter: clamp(20px, 5vw, 48px);
  --nav-h: 64px;

  /* ----- Motion ----- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}