/* ============================================================
   tokens.css — Sistema "ALTA TENSIÓN" (dark / sala de control)
   Grupo 84 · Reposición eléctrica post-desastre · Región Metropolitana
   ============================================================ */
:root {
  /* ── Fondos (light / sala de control de día) ── */
  --bg:        #EEF1F4;
  --bg-slide:  #FAFBFC;
  --bg-spot:   #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F2F5F8;

  /* ── Acentos: 4, cada uno con significado fijo ──
     volt (lima)   = energía / modelo / primario / dato
     tide (teal)   = recuperación / cobertura / restablecido / éxito
     flare (naranja)= costo / problema / crisis / alarma
     vital (magenta)= zonas electrodependientes / prioridad por ley */
  --volt:       #2EA00A;
  --volt-dim:   rgba(46, 160, 10, 0.10);
  --volt-line:  rgba(46, 160, 10, 0.30);
  --volt-glow:  rgba(46, 160, 10, 0.22);

  --tide:       #02A88C;
  --tide-dim:   rgba(2, 168, 140, 0.10);
  --tide-line:  rgba(2, 168, 140, 0.30);
  --tide-glow:  rgba(2, 168, 140, 0.22);

  --flare:      #FA4708;
  --flare-dim:  rgba(250, 71, 8, 0.10);
  --flare-line: rgba(250, 71, 8, 0.30);
  --flare-glow: rgba(250, 71, 8, 0.22);

  --vital:      #EC0A64;
  --vital-dim:  rgba(236, 10, 100, 0.10);
  --vital-line: rgba(236, 10, 100, 0.30);
  --vital-glow: rgba(236, 10, 100, 0.22);

  /* ── Texto ── */
  --text:   #11151B;
  --text2:  #39424E;
  --muted:  #5C6672;
  --dim:    #8A93A0;

  /* ── Líneas / bordes ── */
  --grid:          rgba(0, 0, 0, 0.04);
  --border:        rgba(0, 0, 0, 0.08);
  --border-md:     rgba(0, 0, 0, 0.14);
  --border-strong: rgba(0, 0, 0, 0.22);

  /* ── Sombras ── */
  --shadow-panel: 0 1px 2px rgba(16,21,27,.05), 0 8px 24px rgba(16,21,27,.07);
  --shadow-raise: 0 2px 4px rgba(16,21,27,.06), 0 16px 40px rgba(16,21,27,.10);

  /* ── Gradientes / acento ── */
  --accent-bar:  linear-gradient(90deg, #2EA00A 0%, #02A88C 52%, #FA4708 100%);
  --grad-volt:   linear-gradient(135deg, #2EA00A, #02A88C);
}