/* ═══════════════════════════════════════════════
   DESIGN TOKENS — Campamento NES 2026
   ═══════════════════════════════════════════════ */
:root {
  /* ── Paleta oficial NES ───────────────────── */
  --nes-naranja:    #F25C05;
  --nes-rojo-vivo:  #F24405;
  --nes-rojo:       #F21616;
  --nes-blanco:     #F2F2F2;
  --nes-negro:      #0D0D0D;

  /* ── Capa THERMAL 2026 (piezas The Reason) ── */
  --thermal-black:       #030303;
  --thermal-black-soft:  #090909;
  --thermal-surface:     #0E0E0E;
  --thermal-charcoal:    #161616;
  --thermal-graphite:    #242424;
  --thermal-white:       #F8F8F5;
  --thermal-muted:       #A7A7A2;
  --thermal-muted-dark:  #6D6D69;
  --thermal-red:         #FF2100;
  --thermal-red-deep:    #A90B00;
  --thermal-orange:      #FF5A00;
  --thermal-hot:         #FF9D32;
  --thermal-yellow-hot:  #FFD18A;
  --thermal-heat-white:  #FFF7ED;
  --thermal-cyan:        #00D9FF;
  --thermal-blue:        #007AFF;
  --thermal-blue-deep:   #003DFF;

  /* Glows compuestos — un solo lugar para calibrar intensidad */
  --glow-ember:
    0 0 14px rgba(255,101,0,.55),
    0 0 42px rgba(255,36,0,.35),
    0 0 110px rgba(255,36,0,.18);
  --glow-cyan-core:
    0 0 2px rgba(0,217,255,.9),
    0 0 10px rgba(0,217,255,.45);
  --glow-thermal:
    0 0 2px rgba(0,217,255,.75),
    0 0 12px rgba(0,217,255,.35),
    0 0 26px rgba(255,101,0,.5),
    0 0 70px rgba(255,36,0,.34),
    0 0 140px rgba(255,36,0,.16);

  /* Gradientes de calor (solo texto destacado, halos y reglas) */
  --grad-heat:      linear-gradient(100deg, var(--thermal-red) 0%, var(--thermal-orange) 48%, var(--thermal-white) 100%);
  --grad-heat-rev:  linear-gradient(100deg, var(--thermal-white) 8%, var(--thermal-hot) 48%, var(--thermal-red) 92%);
  --grad-rule:      linear-gradient(90deg, transparent, rgba(255,101,0,.55) 30%, rgba(0,217,255,.4) 70%, transparent);

  /* ── Roles funcionales ───────────────────── */
  --bg:       var(--thermal-black);
  --fg:       var(--thermal-white);
  --accent:   var(--thermal-orange);
  --accent-2: var(--thermal-red);
  --dim:      var(--thermal-muted);
  --dim-strong: #D0CCC7;
  --text-muted-aa: var(--thermal-muted);
  --text-decorative: var(--thermal-muted-dark);
  --dimmer:   rgba(242,242,242,.22);
  --rule:     rgba(242,242,242,.08);
  --faint:    rgba(242,242,242,.05);
  --surface:  rgba(242,242,242,.03);

  /* ── Tipografía ──────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  /* ── Escala tipográfica ──────────────────── */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-lg:   20px;
  --text-xl:   clamp(22px, 3vw, 32px);
  --text-2xl:  clamp(28px, 4.5vw, 48px);
  --text-3xl:  clamp(36px, 6vw, 72px);
  --text-hero: clamp(48px, 10vw, 104px);

  /* ── Spacing (base 4) ────────────────────── */
  --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;

  /* ── Layout ──────────────────────────────── */
  --max-w:      1120px;
  --max-w-text: 680px;
  --pad-page:   clamp(20px, 5vw, 48px);

  /* ── Transiciones ────────────────────────── */
  --ease:    cubic-bezier(.22,1,.36,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --dur-sm:  160ms;
  --dur-md:  280ms;
  --dur-lg:  480ms;

  /* ── Border radius ───────────────────────── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-full: 9999px;

  /* ── Z-index scale ───────────────────────── */
  --z-base:    0;
  --z-overlay: 10;
  --z-nav:     100;
  --z-modal:   1000;

  /* ── Safe areas iOS ──────────────────────── */
  --sat: env(safe-area-inset-top,    0px);
  --sar: env(safe-area-inset-right,  0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
}