/* ============================================================
   PALETA — la misma del SunSplash CRM (azul marino + azul neón)
   Se carga DESPUÉS de tokens.css y solo cambia los colores;
   el resto del sistema (tipografía, radios, tiempos) sigue igual.
   Contrastes medidos sobre el fondo real:
     texto 17.3:1 · texto suave 9.6:1 · cian 9.5:1 · azul 5.1:1
   ============================================================ */
:root {
  --bg:        #050E29;   /* navy profundo, no negro grisáceo */
  --bg-2:      #0D1E46;
  --bg-3:      #0F2049;
  --surface:   #0F2049;

  --line:      rgba(160,190,255,0.16);
  --line-soft: rgba(160,190,255,0.09);

  --text:      #EEF4FF;
  --text-soft: #A5B9DE;
  --text-dim:  #6A7FAB;

  /* Azul de chasis: fondos, bordes, halos, volumen */
  --brand:       #3D7DFF;
  --brand-deep:  #6FA3FF;      /* el azul cuando es TEXTO sobre el fondo */
  --brand-2:     #1C53E6;
  --brand-on:    #050E29;

  /* Azul neón: cifras, precios y el botón que convierte */
  --accent:      #37C4FF;
  --accent-deep: #37C4FF;
  --accent-on:   #050E29;

  --ok:     #22FFA0;
  --warn:   #FFCF33;
  --danger: #FF5D7A;

  /* La luz también cambia: el neón ahora es azul */
  --neon:  0 0 18px color-mix(in srgb, var(--accent) 48%, transparent),
           0 0 54px color-mix(in srgb, var(--accent) 24%, transparent);
  --neon-soft: 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent);
  --neon-blue: 0 0 16px color-mix(in srgb, var(--brand) 38%, transparent),
               0 0 46px color-mix(in srgb, var(--brand) 20%, transparent);
  --edge: color-mix(in srgb, var(--brand) 52%, transparent);
}

/* El fondo, con el azul del CRM */
body {
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(61,125,255,.20), transparent 62%),
    radial-gradient(900px 560px at 92% 4%,  rgba(55,196,255,.13), transparent 60%),
    radial-gradient(1200px 800px at 50% 118%, rgba(28,83,230,.16), transparent 66%),
    var(--bg);
  background-attachment: fixed;
}