/* ────────────────────────────────────────────────────────────
   Design Tokens & Base Reset
   ──────────────────────────────────────────────────────────── */

:root {
  /* surfaces */
  --bg: #1a1a1e;
  --bg-raised: #242428;
  --bg-panel: #2a2a30;
  --bg-input: #1e1e22;
  --bg-hover: #333338;
  --bg-selected: #3a3a44;
  --border: #3a3a42;
  --border-light: #2e2e36;

  /* text */
  --text: #e4e4e8;
  --text-muted: #8e8e98;
  --text-dim: #5e5e68;

  /* accents */
  --accent: #6e8efb;
  --accent-hover: #8aa4ff;
  --accent-muted: rgba(110, 142, 251, 0.15);

  --green: #4ade80;
  --amber: #fbbf24;
  --red: #f87171;
  --dirty-border: var(--amber);
  --dirty-bg: rgba(251, 191, 36, 0.06);

  /* spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;

  /* radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* typography */
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "SF Mono", "Fira Code", monospace;

  /* misc */
  --thumb-size: 160px;
  --transition: 180ms ease;
  --panel-width: 480px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  height: 100%;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
}

/* Full-app layout */
body {
  display: flex;
  flex-direction: column;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}