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

:root {
  --bg: #FAFAF7;
  --sidebar-bg: #1a1a1a;
  --sidebar-text: #a0a0a0;
  --sidebar-active: #e0e0e0;
  --sidebar-accent: #c8a46e;
  --text: #2c2c2c;
  --text-muted: #888;
  --text-light: #b0b0b0;
  --border: #e8e6e0;
  --highlight-bg: #f5f3ed;
  --highlight-border: #d4cfc2;
  --accent: #5a7a5a;
  --accent-hover: #4a6a4a;
  --card-bg: #ffffff;
  --serif: 'Source Serif 4', 'Georgia', serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --writing-size: 19px;
  --writing-lh: 1.72;
}

[data-theme="dark"] {
  --bg: #1e1e1c;
  --sidebar-bg: #141413;
  --sidebar-text: #777;
  --sidebar-active: #d0d0d0;
  --sidebar-accent: #c8a46e;
  --text: #d4d2cc;
  --text-muted: #8a8880;
  --text-light: #5a5850;
  --border: #2e2d2a;
  --highlight-bg: #252422;
  --highlight-border: #3a3830;
  --accent: #6e9a6e;
  --accent-hover: #5e8a5e;
  --card-bg: #232220;
}

html[data-theme] { transition: background-color 0.2s, color 0.2s; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-primary {
  background: var(--accent);
  color: white;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

.btn-small {
  font-size: 11px;
  padding: 4px 10px;
}

.editable-text {
  cursor: text;
  border-radius: 3px;
  transition: background 0.15s;
  padding: 2px 4px;
  margin: -2px -4px;
}

.editable-text:hover {
  background: rgba(0,0,0,0.03);
}

.editable-text:focus {
  outline: none;
  background: rgba(90,122,90,0.06);
  box-shadow: 0 0 0 2px rgba(90,122,90,0.15);
}

.empty-state {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--text-muted);
  font-style: italic;
  padding: 40px 0;
}

/* View transition */
.main { transition: opacity 0.12s; }
.main.transitioning { opacity: 0; }

/* Scrollbar */
.main::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.main::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

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

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}