:root {
  --bg: #e9eaed;
  --panel: #ffffff;
  --border: #dddfe2;
  --text: #1d2129;
  --text-muted: #90949c;
  --accent: #3b5998;
  --accent-dark: #29447e;
  --accent-btn: #4267b2;
  --accent-btn-border: #29447e;
  --radius: 3px;
  --gap: 8px;
}

:root[data-theme="dark"] {
  --bg: #18191a;
  --panel: #242526;
  --border: #3a3b3c;
  --text: #e4e6eb;
  --text-muted: #b0b3b8;
  --accent: #4599ff;
  --accent-dark: #2d68af;
  --accent-btn: #2374e1;
  --accent-btn-border: #2d68af;
}

:root[data-accent="green"] {
  --accent: #42b72a;
  --accent-dark: #36a420;
  --accent-btn: #42b72a;
  --accent-btn-border: #36a420;
}
:root[data-accent="green"][data-theme="dark"] {
  --accent: #42d631;
  --accent-dark: #36b420;
  --accent-btn: #42d631;
  --accent-btn-border: #36b420;
}

:root[data-accent="red"] {
  --accent: #e74c3c;
  --accent-dark: #c0392b;
  --accent-btn: #e74c3c;
  --accent-btn-border: #c0392b;
}
:root[data-accent="red"][data-theme="dark"] {
  --accent: #ff6b5a;
  --accent-dark: #d44c3c;
  --accent-btn: #ff6b5a;
  --accent-btn-border: #d44c3c;
}

:root[data-accent="purple"] {
  --accent: #8e44ad;
  --accent-dark: #6c3483;
  --accent-btn: #8e44ad;
  --accent-btn-border: #6c3483;
}
:root[data-accent="purple"][data-theme="dark"] {
  --accent: #b06ce6;
  --accent-dark: #8e44ad;
  --accent-btn: #b06ce6;
  --accent-btn-border: #8e44ad;
}

:root[data-accent="orange"] {
  --accent: #e67e22;
  --accent-dark: #d35400;
  --accent-btn: #e67e22;
  --accent-btn-border: #d35400;
}
:root[data-accent="orange"][data-theme="dark"] {
  --accent: #f5a623;
  --accent-dark: #d35400;
  --accent-btn: #f5a623;
  --accent-btn-border: #d35400;
}

:root[data-accent="teal"] {
  --accent: #1abc9c;
  --accent-dark: #16a085;
  --accent-btn: #1abc9c;
  --accent-btn-border: #16a085;
}
:root[data-accent="teal"][data-theme="dark"] {
  --accent: #2ecc71;
  --accent-dark: #27ae60;
  --accent-btn: #2ecc71;
  --accent-btn-border: #27ae60;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
}

a { color: var(--accent); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }

button {
  font-family: inherit;
  cursor: pointer;
}

img { max-width: 100%; display: block; }

.hidden { display: none !important; }

.linkish {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.linkish:hover { text-decoration: underline; }