/* ═══════════════════════════════════════════════════════════
   IBBQ LMS — tokens.css
   Variables globales del Design System v3
   Cargado primero. Todos los demás archivos dependen de este.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ───────────────────────────────────────────── */
  --navy:          #0A1628;
  --azul:          #2B4798;
  --azul-mid:      #3D5FC4;
  --azul-light:    #577BE5;
  --azul-xlight:   #C8D6FF;
  --dorado:        #C9A84C;
  --dorado-light:  #F0D080;
  --dorado-dim:    rgba(201,168,76,0.15);

  /* ── Opacidades semánticas (centralizan los rgba hardcoded) */
  --azul-alpha-04: rgba(43,71,152,0.04);
  --azul-alpha-05: rgba(43,71,152,0.05);
  --azul-alpha-08: rgba(43,71,152,0.08);
  --azul-alpha-10: rgba(43,71,152,0.10);
  --azul-alpha-12: rgba(43,71,152,0.12);
  --azul-alpha-15: rgba(43,71,152,0.15);
  --azul-alpha-30: rgba(43,71,152,0.30);
  --azul-alpha-40: rgba(43,71,152,0.40);
  --azul-light-alpha: rgba(87,123,229,0.15);

  /* ── Sidebar opacidades ──────────────────────────────── */
  --sb-border: rgba(255,255,255,0.06);
  --sb-glow:   rgba(255,255,255,0.07);
  --sb-line:   rgba(255,255,255,0.10);

  /* ── Semantic dark (hover de botones y texto colorido) ── */
  --success-dark:  #15803d;
  --danger-dark:   #b91c1c;
  --warning-dark:  #b45309;
  --dorado-text:   #8B6914;
  --info-dark:     #1e40af;

  /* ── Neutrals ─────────────────────────────────────────── */
  --bg:            #F3F5FA;
  --bg-raised:     #EAECF4;
  --surface:       #FFFFFF;
  --surface-2:     #F7F8FC;
  --border:        #E2E6F0;
  --border-strong: #C8CEDF;

  /* ── Text ────────────────────────────────────────────── */
  --text:          #0D1B3E;
  --text-2:        #3A4560;
  --muted:         #6B778F;
  --placeholder:   #A0AABF;

  /* ── Semantic ────────────────────────────────────────── */
  --success:        #16A34A;
  --success-bg:     #F0FDF4;
  --success-border: #86EFAC;
  --warning:        #D97706;
  --warning-bg:     #FFFBEB;
  --warning-border: #FCD34D;
  --danger:         #DC2626;
  --danger-bg:      #FEF2F2;
  --danger-border:  #FCA5A5;
  --info:           #2563EB;
  --info-bg:        #EFF6FF;
  --info-border:    #93C5FD;

  /* ── Spacing ─────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ── Radii ───────────────────────────────────────────── */
  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 20px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(13,27,62,0.06), 0 1px 2px rgba(13,27,62,0.04);
  --shadow:    0 4px 12px rgba(13,27,62,0.08), 0 1px 3px rgba(13,27,62,0.05);
  --shadow-md: 0 8px 24px rgba(13,27,62,0.10), 0 2px 6px rgba(13,27,62,0.06);
  --shadow-lg: 0 20px 48px rgba(13,27,62,0.14), 0 4px 12px rgba(13,27,62,0.08);

  /* ── Button shadows ──────────────────────────────────── */
  --btn-shadow-primary:       0 2px 8px var(--azul-alpha-30);
  --btn-shadow-primary-hover: 0 4px 14px var(--azul-alpha-40);

  /* ── Sidebar ─────────────────────────────────────────── */
  --sidebar-w:           240px;
  --sidebar-w-collapsed: 64px;
  --sidebar-bg:          #0A1628;
  --sidebar-hover:       rgba(255,255,255,0.07);
  --sidebar-active:      rgba(87,123,229,0.20);
  --sidebar-text:        rgba(255,255,255,0.60);
  --sidebar-text-hi:     #FFFFFF;

  /* ── Topbar ──────────────────────────────────────────── */
  --topbar-h: 56px;

  /* ── Transitions ─────────────────────────────────────── */
  --t: 0.18s ease;
  --t-slow: 0.28s ease;
}