/* ===== THEMES ===== */
:root {
  --sidebar-w: 256px;
  /* accent signals — consistent across themes */
  --green: #3a9e6a;
  --red:   #d94f3d;
  --blue:  #4a80c4;
  --amber: #d4742a;
  --amber-light: #f0a060;
}

/* Default: Obsidian (dark) */
body {
  --paper:  #1a1b1e;
  --paper2: #222327;
  --paper3: #2a2b30;
  --ink:    #e8e9ec;
  --ink2:   #b0b2b8;
  --ink3:   #70737d;
  --ink4:   #44464e;
  --rule:   #2e3036;
  --accent: #7c6af7;
  --accent2: #a99ff8;
  --sidebar-bg: #111214;
  --sidebar-text: rgba(255,255,255,0.5);
  --sidebar-active: rgba(255,255,255,0.9);
  --sidebar-hover-bg: rgba(255,255,255,0.05);
  --sidebar-active-bg: rgba(255,255,255,0.08);
  --sidebar-border: rgba(255,255,255,0.07);
}

/* Theme: Slate */
body.theme-slate {
  --paper:  #1c2030;
  --paper2: #232840;
  --paper3: #2a3050;
  --ink:    #dde2f0;
  --ink2:   #9aa3bf;
  --ink3:   #5a6480;
  --ink4:   #343d58;
  --rule:   #2a3050;
  --accent: #5b8af0;
  --accent2: #8fb0f8;
  --sidebar-bg: #161a28;
  --sidebar-text: rgba(200,210,255,0.45);
  --sidebar-active: rgba(200,210,255,0.95);
  --sidebar-hover-bg: rgba(100,120,200,0.08);
  --sidebar-active-bg: rgba(100,120,200,0.14);
  --sidebar-border: rgba(100,120,200,0.1);
}

/* Theme: Forest */
body.theme-forest {
  --paper:  #181e1c;
  --paper2: #1e2620;
  --paper3: #242e28;
  --ink:    #d8ede0;
  --ink2:   #8ab09a;
  --ink3:   #507060;
  --ink4:   #304038;
  --rule:   #243028;
  --accent: #4db87a;
  --accent2: #80d8a0;
  --sidebar-bg: #111816;
  --sidebar-text: rgba(180,230,200,0.45);
  --sidebar-active: rgba(180,230,200,0.95);
  --sidebar-hover-bg: rgba(60,140,90,0.08);
  --sidebar-active-bg: rgba(60,140,90,0.14);
  --sidebar-border: rgba(60,140,90,0.1);
}

/* Theme: Ash (light) */
body.theme-ash {
  --paper:  #f2f2f0;
  --paper2: #e8e8e4;
  --paper3: #dcdcd6;
  --ink:    #1a1a18;
  --ink2:   #3e3e3a;
  --ink3:   #7a7a74;
  --ink4:   #aaaaa4;
  --rule:   #d0d0c8;
  --accent: #4a4a44;
  --accent2: #6a6a64;
  --sidebar-bg: #2a2a28;
  --sidebar-text: rgba(255,255,255,0.45);
  --sidebar-active: rgba(255,255,255,0.95);
  --sidebar-hover-bg: rgba(255,255,255,0.05);
  --sidebar-active-bg: rgba(255,255,255,0.09);
  --sidebar-border: rgba(255,255,255,0.08);
}

/* Theme: Parchment (warm light) */
body.theme-parchment {
  --paper:  #f5f0e8;
  --paper2: #ede8de;
  --paper3: #e4ddd0;
  --ink:    #1a1710;
  --ink2:   #4a4640;
  --ink3:   #8a8478;
  --ink4:   #b8b0a4;
  --rule:   #d8d0c4;
  --accent: #d4742a;
  --accent2: #f0a060;
  --sidebar-bg: #1a1710;
  --sidebar-text: rgba(255,255,255,0.4);
  --sidebar-active: rgba(245,240,232,0.95);
  --sidebar-hover-bg: rgba(255,255,255,0.04);
  --sidebar-active-bg: rgba(255,255,255,0.07);
  --sidebar-border: rgba(255,255,255,0.08);
}

/* ===== THEME PICKER ===== */
.theme-picker {
  display: flex; gap: 6px; align-items: center;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.theme-swatch {
  width: 18px; height: 18px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  transition: all 0.18s; flex-shrink: 0;
}
.theme-swatch:hover { transform: scale(1.2); }
.theme-swatch.active { border-color: rgba(255,255,255,0.7); transform: scale(1.15); }
.theme-swatch.sw-obsidian { background: radial-gradient(circle at 40% 40%, #3a3b42, #111214); }
.theme-swatch.sw-slate     { background: radial-gradient(circle at 40% 40%, #3a4a7a, #161a28); }
.theme-swatch.sw-forest    { background: radial-gradient(circle at 40% 40%, #2a4838, #111816); }
.theme-swatch.sw-ash       { background: radial-gradient(circle at 40% 40%, #c8c8c4, #2a2a28); }
.theme-swatch.sw-parchment { background: radial-gradient(circle at 40% 40%, #f0e8d8, #1a1710); }

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

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--paper2);
  color: var(--ink);
  height: 100vh;
  display: flex;
  overflow: hidden;
  font-size: 14px;
}