/* ============================================================
   AgenteX Educa · Color tokens
   Aesthetic: neon-on-void. Dark base, electric violet→cyan
   signature, lime/amber/red "semáforo" as the product's core
   visual language. Built for dashboards on #05060C.
   ============================================================ */
:root {
  /* ---- Base palette (raw brand colors) ---- */
  --ax-void:        #05060c; /* primary background */
  --ax-night:       #0a0c18; /* secondary background / sidebars */
  --ax-deep-space:  #10122a; /* elevated surfaces / cards (solid) */

  --ax-violet:      #7a5cff; /* Violet Prime · signature, CTAs */
  --ax-violet-2:    #a78bfa; /* violet tint · numerals, hovers */
  --ax-cyan:        #22e7ff; /* Cyan Flux · AI accent, "live", data */
  --ax-lime:        #b6ff4d; /* Lime Pulse · semáforo verde / OK */
  --ax-amber:       #ffb545; /* Amber Alert · semáforo amarillo */
  --ax-red:         #ff4d7a; /* Red Signal · semáforo rojo / urgente */
  --ax-pink:        #ff5cf2; /* Pink PIE · Programa Integración */

  --ax-ink:         #f4f6ff; /* Ink · primary text on dark */
  --ax-ink-dim:     #9aa0c2; /* secondary text */
  --ax-ink-mute:    #6b7094; /* muted text / captions */

  /* ---- Translucent surfaces (glass over the aurora) ---- */
  --ax-card:         rgba(255, 255, 255, 0.04);
  --ax-card-strong:  rgba(255, 255, 255, 0.07);
  --ax-stroke:       rgba(255, 255, 255, 0.09);
  --ax-stroke-strong:rgba(255, 255, 255, 0.18);
  --ax-veil:         rgba(5, 6, 12, 0.70);   /* nav/scrim backdrop */

  /* ---- Tinted fills (color washes used on chips / persona heads) ---- */
  --ax-violet-wash: rgba(122, 92, 255, 0.18);
  --ax-cyan-wash:   rgba(34, 231, 255, 0.18);
  --ax-lime-wash:   rgba(182, 255, 77, 0.14);
  --ax-amber-wash:  rgba(255, 181, 69, 0.16);
  --ax-red-wash:    rgba(255, 77, 122, 0.14);
  --ax-pink-wash:   rgba(255, 92, 242, 0.16);

  /* ============================================================
     SEMANTIC ALIASES — prefer these in product code
     ============================================================ */
  --bg-base:        var(--ax-void);
  --bg-sunken:      var(--ax-night);
  --bg-elevated:    var(--ax-deep-space);
  --surface-card:        var(--ax-card);
  --surface-card-strong: var(--ax-card-strong);
  --surface-veil:        var(--ax-veil);

  --border-subtle:  var(--ax-stroke);
  --border-strong:  var(--ax-stroke-strong);

  --text-primary:   var(--ax-ink);
  --text-secondary: var(--ax-ink-dim);
  --text-muted:     var(--ax-ink-mute);
  --text-on-accent: var(--ax-void); /* dark text on bright violet/cyan */

  --accent:         var(--ax-violet);
  --accent-hover:   var(--ax-violet-2);
  --accent-2:       var(--ax-cyan);
  --link:           var(--ax-cyan);

  /* Semáforo — never add a 4th state */
  --sem-green:  var(--ax-lime);
  --sem-amber:  var(--ax-amber);
  --sem-red:    var(--ax-red);
  --pie:        var(--ax-pink);

  /* Status (maps onto semáforo) */
  --success: var(--ax-lime);
  --warning: var(--ax-amber);
  --danger:  var(--ax-red);
  --info:    var(--ax-cyan);
}