/* ============================================================
   GESTO·DJ — tokens.css
   Sistema de diseño: neón cinematográfico controlado.
   Variables, reset y tipografía. Sin estilos de componentes.
   ============================================================ */

:root{
  /* --- Superficies / fondo --- */
  --bg-0:#05010F;                       /* fondo más profundo (violeta-negro) */
  --bg-1:#0B0717;                       /* superficies elevadas */
  --bg-2:#120B22;                       /* superficies más claras */
  --glass:rgba(18,12,34,.55);
  --glass-fuerte:rgba(12,8,24,.72);
  --glass-borde:rgba(255,255,255,.08);
  --linea:rgba(255,255,255,.06);

  /* --- Texto --- */
  --txt-1:#EAE6FF;                      /* primario */
  --txt-2:#9A93B8;                      /* secundario */
  --txt-3:#5A5478;                      /* tenue / labels */

  /* --- Acentos (los sobreescribe cada género en runtime) --- */
  --acento-1:#00F0FF;                   /* Electrónica por defecto */
  --acento-2:#FF00E5;
  --acento-1-rgb:0,240,255;
  --acento-2-rgb:255,0,229;

  /* --- Glow derivado de los acentos --- */
  --glow-1:0 0 24px rgba(var(--acento-1-rgb),.55);
  --glow-2:0 0 24px rgba(var(--acento-2-rgb),.45);

  /* --- Geometría --- */
  --radio:14px;
  --radio-sm:10px;
  --radio-lg:22px;
  --blur:18px;

  /* --- Movimiento --- */
  --t-rapida:200ms;
  --t-media:320ms;
  --t-lenta:560ms;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-suave:cubic-bezier(.4,0,.2,1);

  /* --- Tipografía --- */
  --fuente:"Space Grotesk", system-ui, -apple-system, sans-serif;
  --fuente-display:"Orbitron", var(--fuente);

  /* --- Capas (z-index) --- */
  --z-fondo:0;
  --z-atmosfera:2;
  --z-pantalla:10;
  --z-hud:20;
  --z-panel:30;
  --z-overlay:50;
}

/* ============================ Reset ============================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }

body{
  font-family:var(--fuente);
  font-weight:400;
  color:var(--txt-1);
  background:var(--bg-0);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
  min-height:100dvh;
  cursor:default;
}

h1,h2,h3{ font-weight:500; line-height:1.05; }

button{
  font-family:inherit;
  color:inherit;
  background:none;
  border:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

select{ font-family:inherit; color:inherit; }

input[type="range"]{ -webkit-appearance:none; appearance:none; background:transparent; }

svg{ display:block; }

/* Utilidades */
.oculto{ display:none !important; }
.lienzo{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:var(--z-fondo); pointer-events:none;
}

::selection{ background:rgba(var(--acento-1-rgb),.35); color:#fff; }

/* Scrollbar discreto (overlays) */
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px; }