/* ============================================================
   MaaşAnaliz Design System — v1.0
   Foundation for all modern UI components
   ============================================================ */

/* ---------- 1. ROOT TOKENS ---------- */
:root {
  /* Primary Brand */
  --primary: #1457FF;
  --primary-hover: #0B3DBF;
  --primary-active: #0931A0;
  --primary-soft: #E8F0FF;
  --primary-soft-hover: #D6E4FF;
  --primary-foreground: #FFFFFF;

  /* Dark Surfaces (sidebar, dark sections) */
  --dark: #071A3D;
  --dark-2: #0B2148;
  --dark-3: #102B5C;
  --dark-foreground: #FFFFFF;
  --dark-muted: #8BA3C7;
  --dark-border: rgba(255, 255, 255, 0.08);
  --dark-border-strong: rgba(255, 255, 255, 0.14);

  /* Backgrounds */
  --bg: #F6F8FC;
  --bg-alt: #EEF2F9;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-hover: #F8FAFD;

  /* Text */
  --text: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #94A3B8;
  --text-inverse: #FFFFFF;

  /* Borders */
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-subtle: #F1F5F9;

  /* Semantic */
  --success: #16A34A;
  --success-soft: #DCFCE7;
  --success-foreground: #15803D;

  --warning: #F59E0B;
  --warning-soft: #FEF3C7;
  --warning-foreground: #B45309;

  --danger: #DC2626;
  --danger-soft: #FEE2E2;
  --danger-foreground: #B91C1C;

  --info: #0EA5E9;
  --info-soft: #E0F2FE;
  --info-foreground: #0369A1;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 9999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --sh-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --sh-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --sh-primary: 0 4px 14px rgba(20, 87, 255, 0.25);
  --sh-primary-lg: 0 8px 24px rgba(20, 87, 255, 0.30);

  /* 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;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Transitions */
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-smooth: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-enter: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Typography */
  --font-sans: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Layout */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 72px;
  --header-h: 64px;
  --bottom-nav-h: 64px;
  --content-max: 1280px;
}

/* ---------- 2. DARK MODE OVERRIDES ---------- */
.dark-mode {
  --bg: #0B1120;
  --bg-alt: #0F172A;
  --surface: #131C31;
  --surface-raised: #1A2540;
  --surface-hover: #1E293B;
  --text: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --border: #1E293B;
  --border-strong: #334155;
  --border-subtle: #1A2540;
  --primary-soft: rgba(20, 87, 255, 0.12);
  --primary-soft-hover: rgba(20, 87, 255, 0.20);
}

/* ---------- 3. BASE RESET & TYPOGRAPHY ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

.tabular-nums { font-variant-numeric: tabular-nums; }

/* ---------- 4. SCROLLBAR ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ---------- 5. FOCUS STATES ---------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- 6. SELECTION ---------- */
::selection {
  background: var(--primary-soft);
  color: var(--primary);
}

/* ---------- 7. SAFE AREA (mobile) ---------- */
.safe-top { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-left { padding-left: env(safe-area-inset-left); }
.safe-right { padding-right: env(safe-area-inset-right); }

/* ---------- 8. PERFORMANCE OPTIMIZATIONS ---------- */

/* Content-visibility for below-the-fold sections (skips rendering off-screen) */
.content-wrapper {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* GPU acceleration for animated elements */
.widget, .stat-card, .btn, .recent-item {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Reduce layout thrashing with contain */
.widget {
  contain: layout style;
}

/* Smooth scrolling with performance */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Optimize image rendering */
img {
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

/* Reduce paint on scrollable areas */
.overflow-x-auto {
  contain: strict;
}
.recent-list {
  contain: layout style;
}