/* ============================================================
   HTP — Design Tokens · Paleta "Voltage"
   ============================================================ */

:root {
  /* ── Color ─────────────────────────────────────────── */
  --bg:          #08090D;
  --surface:     #11141A;
  --surface-2:   #1A1E26;
  --accent:      #C6FF00;   /* lima — primario */
  --accent-2:    #00E5FF;   /* cian — marca */
  --accent-3:    #A855F7;   /* morado — terciario */
  --text:        #F0F4F8;
  --muted:       #7A8290;
  --border:      rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Acentos con alpha */
  --accent-a:    rgba(198, 255, 0, 0.12);
  --accent-2-a:  rgba(0, 229, 255, 0.12);

  /* Glow */
  --glow-lime:   0 0 40px rgba(198, 255, 0, 0.25);
  --glow-cyan:   0 0 40px rgba(0, 229, 255, 0.20);

  /* ── Tipografía ────────────────────────────────────── */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body:    'Sora', system-ui, -apple-system, sans-serif;

  /* Escala fluida */
  --fs-hero:   clamp(3.5rem, 12vw, 11rem);
  --fs-h1:     clamp(2.75rem, 7vw, 6rem);
  --fs-h2:     clamp(2.25rem, 5.5vw, 4.5rem);
  --fs-h3:     clamp(1.5rem, 3vw, 2.25rem);
  --fs-lead:   clamp(1rem, 1.4vw, 1.1875rem);
  --fs-body:   1rem;
  --fs-sm:     0.875rem;
  --fs-xs:     0.75rem;
  --fs-eyebrow: 0.6875rem;

  /* ── Espaciado (escala 4px) ───────────────────────── */
  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;
  --s-4:  1rem;     --s-5:  1.5rem;   --s-6:  2rem;
  --s-7:  3rem;     --s-8:  4rem;     --s-9:  6rem;
  --section-y: clamp(5rem, 12vh, 9rem);
  --container: 78rem;
  --container-narrow: 52rem;

  /* ── Radios ───────────────────────────────────────── */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ── Sombras ──────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow:    0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.6);
  --inset-hi:  inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ── Motion ───────────────────────────────────────── */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.6s;
  --dur-fast:  0.3s;

  /* ── Layers ───────────────────────────────────────── */
  --z-nav:     100;
  --z-overlay: 150;
  --z-modal:   200;
  --z-grain:   300;
}