/* Syntechii colour themes. The whole app reads these variables. Pick one in User Settings > Appearance.
   Add a theme: copy a block, change the name and colours, then add the name in public/themes.js. */
:root, [data-theme="discord"] {
  --c-darkest: #1e1f22;  /* server rail, top bar */
  --c-side: #2b2d31;     /* channel list, member list, settings menu */
  --c-chat: #313338;     /* chat area, settings content */
  --c-accent: #5865f2; --c-accent-hi: #4752c4; --c-green: #23a559; --c-red: #da373c;
  --c-text: #dbdee1; --c-strong: #f2f3f5; --c-muted: #b5bac1; --c-muted2: #949ba4;
  --c-hover: #35373c; --c-sel: #404249; --c-line: #3f4147; --c-input: #383a40; --c-deep: #111214; --c-btn2: #4e5058;
}
/* "Repository": the black GitHub-style look of the Repositories tab */
[data-theme="repository"] {
  --c-darkest: #010409; --c-side: #0a0e14; --c-chat: #0d1117;
  --c-accent: #5865f2; --c-accent-hi: #6f7bf7; --c-green: #3fb950; --c-red: #f85149;
  --c-text: #e6edf3; --c-strong: #ffffff; --c-muted: #8b949e; --c-muted2: #6e7681;
  --c-hover: #161b22; --c-sel: #21262d; --c-line: #30363d; --c-input: #010409; --c-deep: #010409; --c-btn2: #21262d;
}
/* "Midnight": true black, easy on OLED screens */
[data-theme="midnight"] {
  --c-darkest: #000000; --c-side: #0a0a0b; --c-chat: #050505;
  --c-accent: #5865f2; --c-accent-hi: #4752c4; --c-green: #23a559; --c-red: #da373c;
  --c-text: #e3e5e8; --c-strong: #ffffff; --c-muted: #a0a3aa; --c-muted2: #6f7279;
  --c-hover: #151517; --c-sel: #1f1f22; --c-line: #1f1f23; --c-input: #111113; --c-deep: #000000; --c-btn2: #26262a;
  --bg0: #000; --bg1: #050505; --bg2: #0b0b0c; --bg3: #151517; --line: #1f1f23; --bg-side: #000;
}
/* "Light" */
[data-theme="light"] {
  --c-darkest: #e3e5e8; --c-side: #f2f3f5; --c-chat: #ffffff;
  --c-accent: #5865f2; --c-accent-hi: #4752c4; --c-green: #248045; --c-red: #d83c3e;
  --c-text: #313338; --c-strong: #060607; --c-muted: #4e5058; --c-muted2: #5c5e66;
  --c-hover: #ebedef; --c-sel: #d9dbe0; --c-line: #d4d7dc; --c-input: #e3e5e8; --c-deep: #e3e5e8; --c-btn2: #d4d7dc;
  --bg0: #f6f8fa; --bg1: #ffffff; --bg2: #f6f8fa; --bg3: #eaeef2; --line: #d0d7de; --text: #1f2328; --muted: #59636e; --bg-side: #f6f8fa;
  --green: #1a7f37; --red: #cf222e;
  color-scheme: light;
}
[data-theme="light"] body { background: var(--c-chat); }
[data-theme="light"] .sf-bg { background: rgba(0, 0, 0, .45); }

/* ---------- Appearance page ---------- */
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.th-card { display: grid; gap: 8px; padding: 8px; border: 2px solid var(--c-line); border-radius: 8px; background: transparent; color: var(--c-text); text-align: left; }
.th-card:hover { border-color: var(--c-muted2); }
.th-card.on { border-color: var(--c-accent); }
.th-prev { display: grid; grid-template-columns: 22% 30% 1fr; height: 64px; border-radius: 4px; overflow: hidden; background: var(--c-chat); }
.th-prev i { display: block; }
.th-prev i:nth-child(1) { background: var(--c-darkest); }
.th-prev i:nth-child(2) { background: var(--c-side); }
.th-prev i:nth-child(3) { background: var(--c-chat); border-left: 6px solid var(--c-accent); }
.th-name { font-weight: 600; font-size: 14px; }