/* ACAGES UI — design tokens
   Loaded after AdminLTE/Bootstrap 3 core, before acages-components.css.
   Everything downstream reads these custom properties — change the
   palette/scale here and it propagates everywhere. */

:root,
body.light-mode {
  color-scheme: light;

  /* ---- brand palette ---- */
  --ac-primary-50:  #eff6ff;
  --ac-primary-100: #dbeafe;
  --ac-primary-200: #bfdbfe;
  --ac-primary-300: #93c5fd;
  --ac-primary-400: #60a5fa;
  --ac-primary-500: #3b82f6;
  --ac-primary-600: #2563eb;
  --ac-primary-700: #1d4ed8;
  --ac-primary-800: #1e40af;
  --ac-primary: var(--ac-primary-600);
  --ac-primary-rgb: 37, 99, 235;

  --ac-accent-500: #6366f1;
  --ac-accent-600: #4f46e5;
  --ac-accent-rgb: 79, 70, 229;

  --ac-slate-50:  #f8fafc;
  --ac-slate-100: #f1f5f9;
  --ac-slate-200: #e2e8f0;
  --ac-slate-300: #cbd5e1;
  --ac-slate-400: #94a3b8;
  --ac-slate-500: #64748b;
  --ac-slate-600: #475569;
  --ac-slate-700: #334155;
  --ac-slate-800: #1e293b;
  --ac-slate-900: #0f172a;
  --ac-slate-950: #070b14;

  --ac-success: #16a34a;
  --ac-success-rgb: 22, 163, 74;
  --ac-success-bg: #ecfdf3;
  --ac-warning: #d97706;
  --ac-warning-rgb: 217, 119, 6;
  --ac-warning-bg: #fffbeb;
  --ac-danger: #dc2626;
  --ac-danger-rgb: 220, 38, 38;
  --ac-danger-bg: #fef2f2;
  --ac-info: #0284c7;
  --ac-info-rgb: 2, 132, 199;
  --ac-info-bg: #f0f9ff;

  /* ---- surfaces ---- */
  --ac-bg: #f4f6fb;
  --ac-surface: #ffffff;
  --ac-surface-rgb: 255, 255, 255;
  --ac-surface-2: var(--ac-slate-50);
  --ac-border: rgba(15, 23, 42, 0.08);
  --ac-border-strong: rgba(15, 23, 42, 0.14);

  /* glass */
  --ac-glass-bg: rgba(255, 255, 255, 0.66);
  --ac-glass-border: rgba(255, 255, 255, 0.55);
  --ac-glass-blur: 16px;

  /* text */
  --ac-text: var(--ac-slate-800);
  --ac-text-muted: var(--ac-slate-500);
  --ac-text-faint: var(--ac-slate-400);
  --ac-text-on-primary: #ffffff;

  /* sidebar (always dark, per spec, in both themes) */
  --ac-sidebar-bg: #0b1220;
  --ac-sidebar-bg-2: #0f1830;
  --ac-sidebar-text: #cbd5e1;
  --ac-sidebar-text-muted: #64748b;
  --ac-sidebar-active-bg: rgba(var(--ac-primary-rgb), 0.18);
  --ac-sidebar-active-text: #ffffff;
  --ac-sidebar-border: rgba(255, 255, 255, 0.06);

  /* typography */
  --ac-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ac-font-display: 'Plus Jakarta Sans', var(--ac-font-sans);

  /* radii */
  --ac-radius-sm: 8px;
  --ac-radius-md: 12px;
  --ac-radius-lg: 16px;
  --ac-radius-xl: 22px;
  --ac-radius-full: 999px;

  /* shadows */
  --ac-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ac-shadow-md: 0 4px 16px -4px rgba(15, 23, 42, 0.10), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
  --ac-shadow-lg: 0 16px 40px -12px rgba(15, 23, 42, 0.18);
  --ac-shadow-glow: 0 0 0 1px rgba(var(--ac-primary-rgb), 0.08), 0 8px 24px -8px rgba(var(--ac-primary-rgb), 0.35);

  /* spacing scale */
  --ac-space-1: 4px;
  --ac-space-2: 8px;
  --ac-space-3: 12px;
  --ac-space-4: 16px;
  --ac-space-5: 20px;
  --ac-space-6: 24px;
  --ac-space-8: 32px;
  --ac-space-10: 40px;
  --ac-space-12: 48px;

  /* motion */
  --ac-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ac-duration-fast: 140ms;
  --ac-duration: 220ms;
  --ac-duration-slow: 380ms;

  /* hero gradient */
  --ac-hero-gradient: radial-gradient(120% 140% at 100% 0%, rgba(99, 102, 241, 0.85) 0%, rgba(37, 99, 235, 0.92) 42%, rgba(15, 23, 42, 0.98) 100%);
}

/* ---- dark mode ---- */
body.dark {
  color-scheme: dark;

  --ac-bg: #0b1220;
  --ac-surface: #121a2b;
  --ac-surface-rgb: 18, 26, 43;
  --ac-surface-2: #172034;
  --ac-border: rgba(255, 255, 255, 0.08);
  --ac-border-strong: rgba(255, 255, 255, 0.14);

  --ac-glass-bg: rgba(23, 32, 52, 0.62);
  --ac-glass-border: rgba(255, 255, 255, 0.08);

  --ac-text: #e2e8f0;
  --ac-text-muted: #94a3b8;
  --ac-text-faint: #64748b;

  --ac-sidebar-bg: #060a14;
  --ac-sidebar-bg-2: #0a0f1e;
  --ac-sidebar-border: rgba(255, 255, 255, 0.05);

  --ac-success-bg: rgba(22, 163, 74, 0.14);
  --ac-warning-bg: rgba(217, 119, 6, 0.14);
  --ac-danger-bg: rgba(220, 38, 38, 0.14);
  --ac-info-bg: rgba(2, 132, 199, 0.14);

  --ac-shadow-md: 0 4px 20px -4px rgba(0, 0, 0, 0.45), 0 2px 8px -2px rgba(0, 0, 0, 0.3);
  --ac-shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ac-duration-fast: 0ms;
    --ac-duration: 0ms;
    --ac-duration-slow: 0ms;
  }
}