/* ========================================================================
   FINORA Design System v2 - Enhanced
   Modern/Tech (Stripe + Linear + Vercel inspired)
   ======================================================================== */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); background: var(--color-bg); min-height: 100vh; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* ---------- TOKENS ---------- */
:root {
  /* Brand Blue */
  --color-brand-50:  #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;
  --color-brand-950: #172554;

  /* Accent Violet */
  --color-accent-50:  #f5f3ff;
  --color-accent-100: #ede9fe;
  --color-accent-200: #ddd6fe;
  --color-accent-400: #a78bfa;
  --color-accent-500: #8b5cf6;
  --color-accent-600: #7c3aed;
  --color-accent-700: #6d28d9;

  /* Slate Neutrals */
  --color-gray-50:  #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  --color-gray-950: #020617;

  /* Semantic */
  --color-success-50:  #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;

  --color-warning-50:  #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;

  --color-danger-50:   #fef2f2;
  --color-danger-100:  #fee2e2;
  --color-danger-400:  #f87171;
  --color-danger-500:  #ef4444;
  --color-danger-600:  #dc2626;
  --color-danger-700:  #b91c1c;

  /* Charts */
  --chart-1: #3b82f6;
  --chart-2: #8b5cf6;
  --chart-3: #ec4899;
  --chart-4: #f59e0b;
  --chart-5: #10b981;
  --chart-6: #06b6d4;

  /* Gradients */
  --gradient-brand:    linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  --gradient-brand-soft: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  --gradient-accent:   linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  --gradient-success:  linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
  --gradient-warning:  linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  --gradient-danger:   linear-gradient(135deg, #f87171 0%, #dc2626 100%);
  --gradient-rainbow:  linear-gradient(90deg, #3b82f6 0%, #8b5cf6 33%, #ec4899 66%, #f59e0b 100%);
  --gradient-mesh-1:   radial-gradient(at 20% 0%, #dbeafe 0%, transparent 50%),
                       radial-gradient(at 80% 100%, #ede9fe 0%, transparent 50%),
                       radial-gradient(at 0% 100%, #fce7f3 0%, transparent 50%);
  --gradient-mesh-dark: radial-gradient(at 25% 0%, #1e40af 0%, transparent 50%),
                        radial-gradient(at 75% 100%, #6d28d9 0%, transparent 50%),
                        radial-gradient(at 0% 100%, #be185d 0%, transparent 50%);
  --gradient-dark:     linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  --gradient-shimmer:  linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);

  /* Aliases */
  --color-bg:          #ffffff;
  --color-bg-subtle:   var(--color-gray-50);
  --color-bg-muted:    var(--color-gray-100);
  --color-surface:     #ffffff;
  --color-surface-hover: var(--color-gray-50);
  --color-text:        var(--color-gray-900);
  --color-text-muted:  var(--color-gray-600);
  --color-text-subtle: var(--color-gray-500);
  --color-text-inverse:#ffffff;
  --color-border:      var(--color-gray-200);
  --color-border-hover:var(--color-gray-300);
  --color-border-focus:var(--color-brand-500);

  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, 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;
  --text-6xl:  3.75rem;

  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* Spacing */
  --space-0: 0; --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-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  /* Radius */
  --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-3xl: 2rem; --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.07), 0 2px 4px -2px rgb(15 23 42 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.05);
  --shadow-2xl: 0 25px 50px -12px rgb(15 23 42 / 0.18);
  --shadow-focus: 0 0 0 3px rgb(59 130 246 / 0.15);
  --shadow-glow-brand: 0 0 24px rgb(59 130 246 / 0.4);
  --shadow-glow-success: 0 0 24px rgb(34 197 94 / 0.35);
  --shadow-glow-danger: 0 0 24px rgb(239 68 68 / 0.35);
  --shadow-inner: inset 0 2px 4px 0 rgb(15 23 42 / 0.06);

  /* Layout */
  --sidebar-width: 260px;
  --header-height: 64px;
  --container-max: 1400px;

  /* Transitions */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z */
  --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020;
  --z-fixed: 1030; --z-modal: 1050; --z-toast: 1100;
}

/* ---------- UTILITIES ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }
.font-mono { font-family: var(--font-mono); }

.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-success { color: var(--color-success-600); }
.text-danger { color: var(--color-danger-600); }
.text-warning { color: var(--color-warning-600); }
.text-brand { color: var(--color-brand-600); }

.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-rainbow {
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.w-full { width: 100%; }
.h-full { height: 100%; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: var(--radius-full); border: 2px solid var(--color-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); }

/* Focus */
:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 2px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--shadow-focus);
}

::selection { background: var(--color-brand-200); color: var(--color-brand-900); }

/* ---------- KEYFRAMES ---------- */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(59 130 246 / 0.5); }
  50% { box-shadow: 0 0 0 10px rgb(59 130 246 / 0); }
}
@keyframes pingDot {
  0% { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(2); opacity: 0; }
}

.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-fadeIn { animation: fadeIn var(--transition-slow); }
.animate-slideInUp { animation: slideInUp var(--transition-base); }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-glow { animation: glowPulse 2s ease-in-out infinite; }