/* =========================================================
   DESIGN TOKENS
   Central place to tweak the whole dashboard's look.
   Change values here — never hardcode colors/spacing elsewhere.
   ========================================================= */
:root {
  /* ---- Brand / accent (deep blue, SaaS/fintech-professional) ---- */
  --ax-primary: #1a56db;
  --ax-primary-hover: #1648b8;
  --ax-primary-active: #123a94;
  --ax-primary-soft: #eaf1fd; /* light tint for active nav / badges */
  --ax-primary-text: #1648b8; /* accessible text-on-light variant */

  /* ---- Semantic colors ---- */
  --ax-success: #12845a;
  --ax-success-soft: #e6f6ee;
  --ax-danger: #d4394b;
  --ax-danger-soft: #fdecee;
  --ax-warning: #b9770e;
  --ax-warning-soft: #fdf3e3;
  --ax-info: #0ea5e9;
  --ax-info-soft: #e0f2fe;

  /* ---- Neutrals (cool slate, pairs with the blue accent) ---- */
  --ax-gray-25: #fafbfc;
  --ax-gray-50: #f8fafc;
  --ax-gray-100: #f1f5f9;
  --ax-gray-200: #e2e8f0;
  --ax-gray-300: #cbd5e1;
  --ax-gray-400: #94a3b8;
  --ax-gray-500: #64748b;
  --ax-gray-600: #475569;
  --ax-gray-700: #334155;
  --ax-gray-800: #1e293b;
  --ax-gray-900: #0f172a;

  --ax-body-bg: var(--ax-gray-50);
  --ax-surface: #ffffff;
  --ax-border: var(--ax-gray-200);
  --ax-text: var(--ax-gray-800);
  --ax-text-muted: var(--ax-gray-500);

  /* ---- Sidebar (light, Stripe-style, not the old dark AdminLTE) ---- */
  --ax-sidebar-bg: #ffffff;
  --ax-sidebar-border: var(--ax-gray-200);
  --ax-sidebar-text: var(--ax-gray-700);
  --ax-sidebar-text-muted: var(--ax-gray-500);
  --ax-sidebar-active-bg: var(--ax-gray-100);
  --ax-sidebar-active-text: var(--ax-primary-text);
  --ax-sidebar-hover-bg: var(--ax-gray-100);
  --ax-sidebar-width: 224px;

  /* ---- Topbar ---- */
  --ax-topbar-bg: #ffffff;
  --ax-topbar-border: var(--ax-gray-200);
  --ax-topbar-height: 60px;

  /* ---- Typography ---- */
  --ax-font-sans:
    "Inter", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --ax-fs-xs: 0.75rem;
  --ax-fs-sm: 0.8125rem;
  --ax-fs-base: 0.875rem;
  --ax-fs-md: 1rem;
  --ax-fs-lg: 1.125rem;
  --ax-fs-xl: 1.375rem;
  --ax-fs-2xl: 1.75rem;

  /* ---- Radius ---- */
  --ax-radius-sm: 6px;
  --ax-radius-md: 8px;
  --ax-radius-lg: 12px;
  --ax-radius-pill: 999px;

  /* ---- Shadows (soft, layered — the "Stripe card" look) ---- */
  --ax-shadow-xs: 0 1px 2px rgba(26, 26, 31, 0.06);
  --ax-shadow-sm:
    0 1px 3px rgba(26, 26, 31, 0.08), 0 1px 2px rgba(26, 26, 31, 0.04);
  --ax-shadow-md:
    0 4px 12px rgba(26, 26, 31, 0.08), 0 1px 3px rgba(26, 26, 31, 0.05);
  --ax-shadow-lg:
    0 12px 32px rgba(26, 26, 31, 0.12), 0 2px 6px rgba(26, 26, 31, 0.06);

  /* ---- Spacing scale (used by bs4-compat too) ---- */
  --ax-space-1: 0.25rem;
  --ax-space-2: 0.5rem;
  --ax-space-3: 0.75rem;
  --ax-space-4: 1rem;
  --ax-space-5: 1.5rem;
}