/* SPLITWISE — DESIGN TOKENS & BASE */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =============================================
   DARK THEME (Default)
   ============================================= */
:root,
[data-theme="dark"] {
  --bg-primary: #0d0d12;
  --bg-secondary: #161620;
  --bg-tertiary: #1c1c2a;
  --bg-surface: rgba(255,255,255,0.04);
  --bg-surface-hover: rgba(255,255,255,0.07);
  --bg-surface-active: rgba(255,255,255,0.10);
  --border-subtle: rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.12);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.3);
  --accent: #00d4aa;
  --accent-glow: rgba(0,212,170,0.15);
  --accent-hover: #00e8bb;
  --accent-subtle: rgba(0,212,170,0.10);
  --accent-text: #0a0a1a;
  --purple: #a78bfa;
  --purple-glow: rgba(167,139,250,0.15);
  --pink: #f472b6;
  --orange: #fb923c;
  --blue: #60a5fa;
  --red: #f87171;
  --yellow: #facc15;
  --green: #34d399;
  --text-primary: #f0f0f5;
  --text-secondary: rgba(240,240,245,0.60);
  --text-tertiary: rgba(240,240,245,0.35);
  --nav-bg: rgba(13,13,18,0.85);
  --modal-bg: linear-gradient(160deg, rgba(28,28,42,0.98), rgba(13,13,18,0.99));
  --modal-shadow: 0 24px 48px rgba(0,0,0,0.5);
  --input-bg: rgba(255,255,255,0.04);
  --scrollbar-thumb: rgba(255,255,255,0.10);
  --scrollbar-thumb-hover: rgba(255,255,255,0.20);
  color-scheme: dark;
}

/* =============================================
   LIGHT THEME
   ============================================= */
[data-theme="light"] {
  --bg-primary: #f8f9fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0f1f5;
  --bg-surface: rgba(0,0,0,0.03);
  --bg-surface-hover: rgba(0,0,0,0.05);
  --bg-surface-active: rgba(0,0,0,0.08);
  --border-subtle: rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.10);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --shadow-card: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --accent: #00b894;
  --accent-glow: rgba(0,184,148,0.12);
  --accent-hover: #00a884;
  --accent-subtle: rgba(0,184,148,0.08);
  --accent-text: #ffffff;
  --purple: #8b5cf6;
  --purple-glow: rgba(139,92,246,0.12);
  --pink: #ec4899;
  --orange: #f97316;
  --blue: #3b82f6;
  --red: #ef4444;
  --yellow: #ca8a04;
  --green: #059669;
  --text-primary: #1a1a2e;
  --text-secondary: rgba(26,26,46,0.60);
  --text-tertiary: rgba(26,26,46,0.40);
  --nav-bg: rgba(255,255,255,0.90);
  --modal-bg: linear-gradient(160deg, #ffffff, #f8f9fb);
  --modal-shadow: 0 24px 48px rgba(0,0,0,0.15);
  --input-bg: #ffffff;
  --scrollbar-thumb: rgba(0,0,0,0.12);
  --scrollbar-thumb-hover: rgba(0,0,0,0.22);
  color-scheme: light;
}

/* =============================================
   SHARED TOKENS (theme-independent)
   ============================================= */
:root {
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-full: 9999px;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-xs: 0.75rem; --font-sm: 0.8125rem; --font-base: 0.9375rem;
  --font-lg: 1.125rem; --font-xl: 1.375rem; --font-2xl: 1.75rem; --font-3xl: 2.25rem;
  --ease-out: cubic-bezier(0.33,1,0.68,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 350ms;
  --z-dropdown: 100; --z-modal-backdrop: 500; --z-modal: 600; --z-notification: 700;
}

/* =============================================
   BASE STYLES
   ============================================= */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html {
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-base);
  color: var(--text-primary);
  line-height: 1.65;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-primary);
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a { color:var(--accent); text-decoration:none; transition:color var(--duration-fast) var(--ease-out); }
a:hover { color:var(--accent-hover); }
::selection { background:var(--accent); color:var(--accent-text); }

/* Scrollbar — desktop only */
@media (pointer: fine) {
  ::-webkit-scrollbar { width:6px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:var(--radius-full); }
  ::-webkit-scrollbar-thumb:hover { background:var(--scrollbar-thumb-hover); }
}

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.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; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.96)} to{opacity:1;transform:scale(1)} }
@keyframes slideInRight { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes notificationSlide { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}