/* ═══════════════════════════════════════════════════════
   tokens.css — Design System SynApp E2
   Fuente única de verdad para colores, sombras, gradientes.
   Modo: CLARO (light mode)
═══════════════════════════════════════════════════════ */
:root {
  /* ── Fondos ── */
  --bg:          #F8FAFC;  /* slide background */
  --bg2:         #F1F5F9;  /* fondo alternativo / secondary */
  --bg-card:     #FFFFFF;  /* cards */
  --bg-navy:     #1E3A5F;  /* navy sidebar block (identico al sidebar del dashboard) */
  --bg-input:    #EEF4FF;  /* input focus */

  /* ── Acentos (espejo de theme.css del dashboard, light mode) ── */
  --blue:        #2563EB;
  --blue-light:  #3B82F6;
  --blue-dim:    rgba(37, 99, 235, 0.09);
  --blue-glow:   rgba(37, 99, 235, 0.22);
  --blue-border: rgba(37, 99, 235, 0.25);

  --violet:      #7C3AED;
  --violet-light:#8B5CF6;
  --violet-dim:  rgba(124, 58, 237, 0.09);
  --violet-glow: rgba(124, 58, 237, 0.20);
  --violet-border: rgba(124, 58, 237, 0.25);

  --green:       #16A34A;
  --green-light: #22C55E;
  --green-dim:   rgba(22, 163, 74, 0.10);
  --green-glow:  rgba(22, 163, 74, 0.20);
  --green-border:rgba(22, 163, 74, 0.25);

  --amber:       #B45309;
  --amber-light: #D97706;
  --amber-dim:   rgba(180, 83, 9, 0.10);
  --amber-glow:  rgba(180, 83, 9, 0.18);
  --amber-border:rgba(180, 83, 9, 0.25);

  /* ── Texto ── */
  --text:        #0F172A;  /* slate-950 */
  --text2:       #334155;  /* slate-700 */
  --muted:       #64748B;  /* slate-500 */
  --dim:         #94A3B8;  /* slate-400 */
  --text-navy:   #E8EDF5;  /* texto sobre fondo navy */

  /* ── Bordes ── */
  --border:      rgba(15, 23, 42, 0.08);
  --border-md:   rgba(15, 23, 42, 0.14);
  --border-strong:rgba(15, 23, 42, 0.22);

  /* ── Sombras ── */
  --shadow-card: 0 1px 2px rgba(15,23,42,.05), 0 4px 16px rgba(37,99,235,.08), 0 1px 0 rgba(255,255,255,.6) inset;
  --shadow-hover: 0 4px 12px rgba(15,23,42,.07), 0 16px 40px rgba(37,99,235,.18), 0 1px 0 rgba(255,255,255,.6) inset;
  --shadow-lg:   0 12px 50px rgba(37, 99, 235, 0.16);
  --shadow-navy: 0 8px 32px rgba(30, 58, 95, 0.30);

  /* ── Gradientes ── */
  --accent-bar:  linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #16A34A 100%);
  --hero-grad:   linear-gradient(135deg, #1E3A5F 0%, #1D4ED8 55%, #2563EB 100%);
  --brand-grad:  linear-gradient(135deg, #3B82F6, #7C3AED);

  /* ── Cards border-left acentuadas ── */
  --card-bl-blue:   border-left: 3px solid var(--blue);
  --card-bl-violet: border-left: 3px solid var(--violet);
  --card-bl-green:  border-left: 3px solid var(--green);
  --card-bl-amber:  border-left: 3px solid var(--amber);
}