/* =============================================
   VARIABLES — Design Tokens globales
   ============================================= */

:root {

  /* ── Colores ── */
  --color-bg:         #0a0a0a;
  --color-bg-alt:     #141414;
  --color-surface:    #1a1a1a;
  --color-surface-2:  #232323;
  --color-border:     #2a2a2a;

  --color-primary:    #ff5c00;
  --color-primary-hv: #ff8c42;
  --color-accent:     #00e5a0;
  --color-wa:         #25d366;

  --color-text:       #f5f0e8;
  --color-text-muted: #c8c0b0;
  --color-text-dim:   #7a7060;

  /* ── Tipografía ── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Outfit', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --fs-xs:   0.70rem;   /* 11px */
  --fs-sm:   0.825rem;  /* 13px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.05rem;
  --fs-lg:   1.2rem;
  --fs-xl:   1.5rem;

  /* Escalado display — clamp(mín, fluido, máx) */
  --fs-h1:   clamp(3.2rem, 7vw, 7rem);
  --fs-h2:   clamp(2.6rem, 5vw, 4.5rem);
  --fs-h3:   clamp(1.8rem, 3vw, 2.4rem);

  /* ── Espaciado ── */
  --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:  80px;
  --space-10: 100px;
  --space-12: 120px;

  /* ── Layout ── */
  --max-width:     1280px;
  --section-px:    60px;
  --section-py:    100px;
  --radius-sm:     2px;
  --radius-md:     6px;
  --radius-lg:     16px;
  --radius-full:   9999px;

  /* ── Sombras ── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.6);
  --shadow-wa:  0 4px 24px rgba(37,211,102,0.4);

  /* ── Transiciones ── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --ease-snap: cubic-bezier(0.77, 0, 0.18, 1);

  --dur-fast:   0.2s;
  --dur-base:   0.35s;
  --dur-slow:   0.7s;
  --dur-xslow:  0.9s;

  /* ── Z-index ── */
  --z-base:    1;
  --z-raised:  10;
  --z-nav:     100;
  --z-float:   200;
  --z-cursor:  9999;
}