/* ============================================================
   Base — reset, tokens, typography
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); text-decoration: none; }
.hidden { display: none !important; }

/* ---------- Design tokens (Light) ---------- */
:root {
  --primary: #6C63FF;
  --primary-2: #8B7CFF;
  --primary-3: #5849ff;
  --primary-soft: #EEECFF;
  --primary-softer: #F6F4FF;
  --grad-primary: linear-gradient(135deg, #8B7CFF 0%, #6C63FF 100%);
  --grad-primary-2: linear-gradient(135deg, #A78BFA 0%, #7C6BFF 100%);

  --accent-pink: #FF89C0;
  --accent-orange: #FFB37A;
  --accent-yellow: #FFD76A;
  --accent-teal: #7AE0C9;
  --accent-blue: #7BC3FF;
  --accent-lilac: #C9B8FF;

  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #3B82F6;

  --bg: #F7F6FB;
  --bg-2: #FFFFFF;
  --bg-3: #F1EFFA;
  --surface: #FFFFFF;
  --surface-2: #FBFAFF;
  --surface-3: #F4F1FB;
  --card: #FFFFFF;
  --border: #ECE9F6;
  --border-strong: #D9D3EE;
  --divider: #F0EDFA;

  --text: #1F1B36;
  --text-2: #5A5676;
  --text-3: #8B869F;
  --text-inverse: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(31, 27, 54, .06);
  --shadow: 0 8px 24px rgba(108, 99, 255, .08), 0 2px 6px rgba(31, 27, 54, .04);
  --shadow-lg: 0 20px 48px rgba(108, 99, 255, .14), 0 4px 12px rgba(31, 27, 54, .06);
  --shadow-xl: 0 30px 80px rgba(108, 99, 255, .22);

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;

  --sidebar-w: 264px;
  --topbar-h: 72px;

  --easing: cubic-bezier(.3, .8, .3, 1);
  --dur: 220ms;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --primary: #8B7CFF;
  --primary-2: #A898FF;
  --primary-3: #7A6CFF;
  --primary-soft: #2A2558;
  --primary-softer: #201B48;

  --bg: #0F0C24;
  --bg-2: #15122E;
  --bg-3: #1A1736;
  --surface: #1A1736;
  --surface-2: #211C45;
  --surface-3: #282252;
  --card: #1A1736;
  --border: #2A244F;
  --border-strong: #3B336A;
  --divider: #25204A;

  --text: #F0ECFF;
  --text-2: #BDB4D8;
  --text-3: #8E87AE;
  --text-inverse: #1F1B36;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, .55);
  --shadow-xl: 0 30px 80px rgba(0, 0, 0, .6);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
h1 { font-size: 28px; font-weight: 800; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
p { margin: 0; color: var(--text-2); }
small, .small { font-size: 12px; color: var(--text-3); }
.muted { color: var(--text-3); }
.eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--primary); background-clip: padding-box; border: 2px solid transparent; }

/* ---------- Utilities ---------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.grow { flex: 1 1 auto; }
.center { align-items: center; justify-content: center; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-6{margin-top:24px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}.mb-6{margin-bottom:24px}
.w-full { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.pointer { cursor: pointer; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
@keyframes slideInRight { from { transform: translateX(32px); opacity: 0;} to { transform: translateX(0); opacity: 1;} }
@keyframes pop { 0%{transform:scale(.92);opacity:0} 100%{transform:scale(1);opacity:1} }

.fade-in { animation: fadeIn .35s var(--easing) both; }