/* ==========================================================================
   NEON — Colors & Type tokens
   Design language: neon-tube light on deep night. High contrast, bold
   editorial type, lots of breathing room. Two signal colors pulled straight
   from the logo — red-neon + cyan-neon — used sparingly against near-black.
   ========================================================================== */

/* ---------- FONTS -------------------------------------------------------- */
/* Bold display headlines lean on a geometric sans with tight letterforms
   (close to the logo's stroke); body copy stays neutral grotesque.
   Mono is used for tags / labels / numbers.
   NOTA: las fuentes se cargan desde index.html (preconnect + <link> async). Antes
   venían por @import acá adentro, que las encadenaba en serie DESPUÉS de bajar este
   CSS (cascada render-blocking → frenaba el primer dibujado). */

:root {
  /* ====================================================================
     COLOR — brand primaries (from logo)
     ==================================================================== */
  --neon-red:        #FF1830;   /* core red neon — wordmark */
  --neon-red-glow:   #FF4A5E;   /* outer halo */
  --neon-red-deep:   #C5001A;   /* pressed / on-light */

  --neon-cyan:       #8FD4DE;   /* core cyan — infinity */
  --neon-cyan-glow:  #B7E6EC;   /* outer halo */
  --neon-cyan-deep:  #4FA9B6;   /* pressed / on-light */

  /* ====================================================================
     COLOR — neutrals (night sky)
     ==================================================================== */
  --ink-000:   #000000;         /* pure void */
  --ink-050:   #0A0A0F;         /* base surface (default bg) */
  --ink-100:   #101018;         /* raised surface */
  --ink-200:   #1A1A24;         /* cards */
  --ink-300:   #262633;         /* borders-soft */
  --ink-400:   #3A3A4A;         /* borders-strong */
  --ink-500:   #5B5B6E;         /* muted fg */
  --ink-600:   #8A8A9E;         /* secondary fg */
  --ink-700:   #BFBFCF;         /* tertiary-light */
  --ink-800:   #E6E6EE;         /* near-white */
  --ink-900:   #FFFFFF;         /* pure white */

  /* ====================================================================
     COLOR — semantic
     ==================================================================== */
  --bg:         var(--ink-050);
  --bg-raised:  var(--ink-100);
  --bg-card:    var(--ink-200);

  --fg:         var(--ink-900);    /* primary text */
  --fg-muted:   var(--ink-700);    /* body */
  --fg-subtle:  var(--ink-600);    /* captions, meta */
  --fg-faint:   var(--ink-500);    /* hints */

  --border:         var(--ink-300);
  --border-strong:  var(--ink-400);

  --accent:         var(--neon-red);
  --accent-alt:     var(--neon-cyan);

  --success: #4ADE80;
  --warning: #FFB84D;
  --danger:  var(--neon-red);
  --info:    var(--neon-cyan);

  /* Alias que el código (app.js / app.css) usa pero que NO estaban declarados.
     Sin esto, en ~64 lugares sin fallback el texto heredaba el color del padre
     (blanco) en vez de salir tenue → jerarquía visual rota. */
  --accent-cyan: var(--neon-cyan);
  --accent-red:  var(--neon-red);
  --fg-mute:     var(--fg-subtle);
  --bg-0:        var(--ink-050);

  /* ====================================================================
     TYPE — families
     ==================================================================== */
  --font-display: 'Archivo Black', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ====================================================================
     TYPE — scale (modular, 1.25 ratio, bold presentation emphasis)
     ==================================================================== */
  --t-hero:   clamp(56px, 8vw, 128px);
  --t-d1:     clamp(44px, 6vw, 88px);
  --t-d2:     clamp(36px, 4.5vw, 64px);
  --t-h1:     44px;
  --t-h2:     32px;
  --t-h3:     24px;
  --t-body:   17px;
  --t-small:  14px;
  --t-caption:12px;

  --lh-tight: 0.95;
  --lh-snug:  1.1;
  --lh-normal:1.45;
  --lh-loose: 1.65;

  --tr-tight: -0.04em;    /* display */
  --tr-snug:  -0.02em;    /* headings */
  --tr-normal:0;          /* body */
  --tr-wide:  0.06em;     /* eyebrows, all-caps */
  --tr-xwide: 0.18em;     /* overline */

  /* ====================================================================
     SPACING — 4px base
     ==================================================================== */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

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

  /* ====================================================================
     ELEVATION — neon glow system (no generic drop shadows)
     Glows = signature brand move. Plain shadows are forbidden on bg-dark.
     ==================================================================== */
  --glow-red-sm:  0 0 8px rgba(255,24,48,.55), 0 0 18px rgba(255,24,48,.35);
  --glow-red-md:  0 0 14px rgba(255,24,48,.75), 0 0 32px rgba(255,24,48,.45), 0 0 64px rgba(255,24,48,.2);
  --glow-red-lg:  0 0 18px rgba(255,24,48,.9),  0 0 48px rgba(255,24,48,.55), 0 0 120px rgba(255,24,48,.3);

  --glow-cyan-sm: 0 0 8px rgba(143,212,222,.6), 0 0 18px rgba(143,212,222,.35);
  --glow-cyan-md: 0 0 14px rgba(143,212,222,.8), 0 0 32px rgba(143,212,222,.5), 0 0 64px rgba(143,212,222,.22);
  --glow-cyan-lg: 0 0 18px rgba(143,212,222,.95),0 0 48px rgba(143,212,222,.6), 0 0 120px rgba(143,212,222,.3);

  --inner-hair: inset 0 0 0 1px rgba(255,255,255,.06);
  --inner-card: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.04);

  /* ====================================================================
     MOTION
     ==================================================================== */
  --ease-out:    cubic-bezier(.2,.8,.2,1);
  --ease-inout:  cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
  --dur-xslow:  900ms;

  /* Signature flicker animation — used on logo hover / hero text */
  --flicker-keyframes: 'neonFlicker';
}

/* ==========================================================================
   SEMANTIC UTILITY CLASSES
   ========================================================================== */

/* Display / headings */
.h-hero { font-family: var(--font-display); font-size: var(--t-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); text-transform: uppercase; color: var(--fg); }
.h-d1   { font-family: var(--font-display); font-size: var(--t-d1);   line-height: var(--lh-tight); letter-spacing: var(--tr-tight); text-transform: uppercase; color: var(--fg); }
.h-d2   { font-family: var(--font-display); font-size: var(--t-d2);   line-height: var(--lh-snug);  letter-spacing: var(--tr-tight); color: var(--fg); }
.h-h1   { font-family: var(--font-sans); font-weight: 800; font-size: var(--t-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--fg); }
.h-h2   { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--fg); }
.h-h3   { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-h3); line-height: var(--lh-snug); color: var(--fg); }

.t-body   { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body);    line-height: var(--lh-normal); color: var(--fg-muted); }
.t-small  { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-small);   line-height: var(--lh-normal); color: var(--fg-muted); }
.t-caption{ font-family: var(--font-sans); font-weight: 500; font-size: var(--t-caption); line-height: var(--lh-normal); color: var(--fg-subtle); }
.t-over   { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-caption); letter-spacing: var(--tr-xwide); text-transform: uppercase; color: var(--fg-subtle); }
.t-mono   { font-family: var(--font-mono); font-weight: 500; color: var(--fg-muted); }

/* Neon text treatments — THE brand move */
.n-glow-red  { color: var(--neon-red);  text-shadow: var(--glow-red-md);  }
.n-glow-cyan { color: var(--neon-cyan); text-shadow: var(--glow-cyan-md); }

/* Neon tube outline — ultra thin stroke + glow, mimics logo */
.n-tube-red {
  color: transparent;
  -webkit-text-stroke: 2px var(--neon-red);
  text-shadow: var(--glow-red-md);
  font-family: var(--font-sans);
  font-weight: 300;
}
.n-tube-cyan {
  color: transparent;
  -webkit-text-stroke: 2px var(--neon-cyan);
  text-shadow: var(--glow-cyan-md);
  font-family: var(--font-sans);
  font-weight: 300;
}

@keyframes neonFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .4; }
}
.n-flicker { animation: neonFlicker 4.5s infinite; }

/* ==========================================================================
   BASE
   ========================================================================== */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}