/* ─────────────────────────────────────────────────
   RE-LOAD · Design Tokens
   Paleta: negro + papel cálido + ámbar (cero azul/violeta)
   ───────────────────────────────────────────────── */

:root {
  /* ── Colores ── */
  --color-ink:        #0A0A0A;
  --color-ink-soft:   #1F1F1F;
  --color-ink-mute:   #6B6B6B;
  --color-ink-faint:  #9A958A;
  --color-paper:      #F5F2EC;
  --color-paper-2:    #ECEAE3;
  --color-paper-3:    #E4E1D8;
  --color-line:       #D9D5CB;
  --color-line-soft:  rgba(10, 10, 10, 0.06);
  --color-amber:      #E0A82E;
  --color-amber-soft: #F4D58A;
  --color-amber-deep: #A87B0F;
  --color-amber-tint: #FBEFD0;
  --color-soil:       #3D2E1F;

  /* WhatsApp brand approximation */
  --wa-green:        #075E54;
  --wa-green-dark:   #054B43;
  --wa-bg:           #ECE5DD;
  --wa-bubble-in:    #FFFFFF;
  --wa-bubble-out:   #DCF8C6;
  --wa-text:         #111111;
  --wa-mute:         #667781;

  /* ── Tipografía ── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Escala tipográfica 1.250 (Major Third) - optimizada para hierarchy */
  --step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --step-0:  clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --step-1:  clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --step-2:  clamp(1.1875rem, 1.1rem + 0.45vw, 1.5rem);
  --step-3:  clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --step-4:  clamp(1.875rem, 1.6rem + 1.4vw, 2.5rem);
  --step-5:  clamp(2.25rem, 1.85rem + 2vw, 3.25rem);
  --step-6:  clamp(2.75rem, 2.1rem + 3.2vw, 4.25rem);
  --step-7:  clamp(3.25rem, 2.4rem + 4.4vw, 5.5rem);

  /* ── Espaciado (base 8px, escala exponencial) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ── Layout ── */
  --container-max:  1320px;
  --container-pad:  clamp(24px, 4vw, 48px);
  --section-pad:    clamp(96px, 11vw, 144px);

  /* ── Radii ── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ── Sombras ── */
  --shadow-1: 0 1px 2px rgba(10, 10, 10, 0.04), 0 2px 6px rgba(10, 10, 10, 0.04);
  --shadow-2: 0 4px 12px rgba(10, 10, 10, 0.06), 0 12px 32px rgba(10, 10, 10, 0.06);
  --shadow-3: 0 12px 24px rgba(10, 10, 10, 0.08), 0 24px 48px rgba(10, 10, 10, 0.10);
  --shadow-phone: 0 24px 60px rgba(10, 10, 10, 0.18), 0 4px 12px rgba(10, 10, 10, 0.12), inset 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-amber: 0 6px 20px rgba(224, 168, 46, 0.35);
  --shadow-amber-soft: 0 4px 14px rgba(224, 168, 46, 0.20);

  /* ── Motion (curvas y duraciones) ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms;
  --t-med: 280ms;
  --t-slow: 600ms;
  --t-reveal: 720ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-med: 0.01ms;
    --t-slow: 0.01ms;
    --t-reveal: 0.01ms;
  }
}