/* ===== THEMES ===== */
:root {
  --sidebar-w: 256px;
  --zoom: 1;
  /* 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.9);
  --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:  #252b42;
  --paper2: #2c3350;
  --paper3: #333b5e;
  --ink:    #f0f2ff;
  --ink2:   #c8d0e8;
  --ink3:   #7a88aa;
  --ink4:   #424d6a;
  --rule:   #2a3050;
  --accent: #5b8af0;
  --accent2: #8fb0f8;
  --sidebar-bg: #161a28;
  --sidebar-text: rgba(220,228,255,0.92);
  --sidebar-active: rgba(240,242,255,1);
  --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:  #202a24;
  --paper2: #263020;
  --paper3: #2c3830;
  --ink:    #f0f8f2;
  --ink2:   #c0d8c8;
  --ink3:   #6a8f78;
  --ink4:   #384840;
  --rule:   #243028;
  --accent: #4db87a;
  --accent2: #80d8a0;
  --sidebar-bg: #111816;
  --sidebar-text: rgba(210,240,220,0.92);
  --sidebar-active: rgba(240,248,242,1);
  --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: Ember (dark warm red) */
body.theme-ash {
  --paper:  #28201e;
  --paper2: #302624;
  --paper3: #382c2a;
  --ink:    #f5ede8;
  --ink2:   #d4b8b0;
  --ink3:   #8a6058;
  --ink4:   #503830;
  --rule:   #2e2220;
  --accent: #e05030;
  --accent2: #f08060;
  --sidebar-bg: #160e0c;
  --sidebar-text: rgba(245,220,210,0.92);
  --sidebar-active: rgba(245,237,232,1);
  --sidebar-hover-bg: rgba(200,80,50,0.08);
  --sidebar-active-bg: rgba(200,80,50,0.15);
  --sidebar-border: rgba(200,80,50,0.1);
}

/* 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(0,0,0,0.85);
  --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%, #c04030, #160e0c); }
.theme-swatch.sw-parchment { background: radial-gradient(circle at 40% 40%, #f0e8d8, #1a1710); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; overflow: hidden; }

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