@import "tailwindcss";
@variant dark (&:is(.dark *));

:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --text: #0f172a;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --primary: #4f46e5;
  --primary-light: #eef2ff;
  --primary-fg: #ffffff;
  --sidebar-width: 220px;
}

@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-border: var(--border);
  --color-primary: var(--primary);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

.dark {
  --bg: #0f172a;
  --surface: #1e293b;
  --border: #334155;
  --border-light: #1e293b;
  --text: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --primary: #6366f1;
  --primary-light: #1e1b4b;
  --primary-fg: #ffffff;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  transition: background-color 0.15s, color 0.15s;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
  .app-main { margin-left: var(--sidebar-width); }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }