/* ============================================================
  MJ Solution — Business Interface System
  Clear hierarchy, restrained surfaces, dependable controls.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Vibrant Palette ──────────────────────────────────────── */
  --color-primary:          #2563eb; /* Vivid Royal Blue */
  --color-primary-hover:    #1d4ed8;
  --color-primary-deep:     #1a44cc;
  --color-primary-light:    #60a5fa;
  --color-primary-50:       #eff6ff;
  --color-primary-100:      #dbeafe;
  --color-primary-200:      #bfdbfe;
  --color-primary-border:   #93c5fd;
  --color-primary-gradient: #2563eb;

  --color-accent:           #0d9488; /* Emerald Teal */
  --color-accent-light:     #14b8a6;
  --color-accent-50:        #f0fdfa;
  --color-accent-100:       #ccfbf1;

  --color-purple:           #7c3aed; /* Electric Violet */
  --color-purple-50:        #f5f3ff;
  --color-purple-100:       #ede9fe;

  /* ── Semantic Colors ──────────────────────────────────────── */
  --color-success:          #059669;
  --color-success-light:    #10b981;
  --color-success-bg:       #ecfdf5;
  --color-success-border:   #a7f3d0;
  --color-success-text:     #047857;

  --color-warning:          #d97706;
  --color-warning-light:    #f59e0b;
  --color-warning-bg:       #fffbeb;
  --color-warning-border:   #fde68a;
  --color-warning-text:     #b45309;

  --color-danger:           #dc2626;
  --color-danger-light:     #ef4444;
  --color-danger-bg:        #fef2f2;
  --color-danger-border:    #fecaca;
  --color-danger-text:      #b91c1c;

  --color-info:             #0284c7;
  --color-info-light:       #38bdf8;
  --color-info-bg:          #f0f9ff;
  --color-info-border:      #bae6fd;
  --color-info-text:        #0369a1;

  /* ── Neutral Palette ──────────────────────────────────────── */
  --color-neutral-50:       #f8fafc;
  --color-neutral-100:      #f1f5f9;
  --color-neutral-150:      #e2e8f0;
  --color-neutral-200:      #cbd5e1;
  --color-neutral-300:      #94a3b8;
  --color-neutral-400:      #64748b;
  --color-neutral-500:      #475569;
  --color-neutral-600:      #334155;
  --color-neutral-700:      #1e293b;
  --color-neutral-800:      #0f172a;
  --color-neutral-900:      #020617;

  /* ── Backgrounds ──────────────────────────────────────────── */
  --color-bg:               #f8fafc;
  --color-bg-elevated:      #ffffff;
  --color-bg-card:          #ffffff;
  --color-bg-card-hover:    #ffffff;
  --color-bg-input:         #ffffff;
  --color-bg-sunken:        #f1f5f9;

  /* ── Sidebar ──────────────────────────────────────────────── */
  --color-sidebar:          #0f172a;
  --color-sidebar-text:     #94a3b8;
  --color-sidebar-hover:    rgba(255,255,255,0.08);
  --color-sidebar-active:   #2563eb;
  --color-sidebar-border:   rgba(255,255,255,0.07);
  --color-sidebar-active-text: #ffffff;

  /* ── Text High Contrast ───────────────────────────────────── */
  --color-text:             #0f172a;
  --color-text-muted:       #475569;
  --color-text-faint:       #64748b;
  --color-text-inverse:     #ffffff;

  /* ── Borders ──────────────────────────────────────────────── */
  --color-border:           #e2e8f0;
  --color-border-strong:    #cbd5e1;
  --color-border-focus:     #2563eb;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:   0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:   0 4px 16px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-lg:   0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-xl:   0 24px 48px rgba(15, 23, 42, 0.16), 0 8px 20px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 1px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-glow-primary:   0 4px 20px rgba(37, 99, 235, 0.35);
  --shadow-glow-accent:    0 4px 20px rgba(13, 148, 136, 0.35);
  --shadow-glow-purple:    0 4px 20px rgba(124, 58, 237, 0.30);
  --shadow-inner: inset 0 1px 3px rgba(15, 23, 42, 0.08);

  /* ── Typography ───────────────────────────────────────────── */
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --font-display:'Outfit', 'Inter', sans-serif;
  --font-mono:   'JetBrains Mono', monospace;

  --text-xs:     0.75rem;
  --text-sm:     0.875rem;
  --text-base:   1rem;
  --text-lg:     1.125rem;
  --text-xl:     1.25rem;
  --text-2xl:    1.5rem;
  --text-3xl:    1.875rem;
  --text-4xl:    2.25rem;
  --text-5xl:    3rem;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:   -0.03em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;

  /* ── Spacing ──────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;

  /* ── Border Radius ────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  14px;
  --radius-3xl:  16px;
  --radius-full: 9999px;

  /* ── Transitions & Easing ─────────────────────────────────── */
  --transition-fast:   all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-width:      260px;
  --topbar-height:      64px;
  --container-xl:       1240px;

  /* ── Z-Index Scale ────────────────────────────────────────── */
  --z-base:       0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-modal:      500;
  --z-toast:      700;
  --z-nav:        1000;  /* Highest — navbar always on top */
}

/* ── Keyframe Animations ──────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3); }
  50%       { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
}

@keyframes slideInLeft {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}