/* Lucid look for the Fider feedback board (matches lucidviewer.com). Paste into Fider > Advanced > Custom CSS. */

/* Colours: the same dark page, surface, line, text and accent as the website, in both of Fider's themes. */
body[data-theme=light],
body[data-theme=dark] {
  --colors-gray-50: #1b2123;
  --colors-gray-100: #171c1d;
  --colors-gray-200: #232a2c;
  --colors-gray-300: #2c3437;
  --colors-gray-400: #3a4549;
  --colors-gray-500: #7d8a90;
  --colors-gray-600: #93a0a6;
  --colors-gray-700: #b7c3c9;
  --colors-gray-800: #dfeaf2;
  --colors-gray-900: #f2f7fa;
  --colors-white: #1f2527;
  --colors-black: #dfeaf2;
  --colors-primary-light: #5cd6ff;
  --colors-primary-base: #00bfff;
  --colors-primary-dark: #0099cc;
  --colors-blue-50: #06222c;
  --colors-blue-100: #0b3a4a;
  --colors-blue-200: #b3eaff;
  --colors-blue-300: #7fdcff;
  --colors-blue-400: #33ccff;
  --colors-blue-500: #00bfff;
  --colors-blue-600: #00a8e0;
  --colors-blue-700: #33ccff;
  --colors-blue-800: #0b3a4a;
  --colors-blue-900: #06222c;
  color-scheme: dark;
}

/* Fider's few fixed-colour helpers, moved to the same palette. */
body[data-theme] .text-gray-500 { color: #7d8a90; }
body[data-theme] .text-gray-600 { color: #93a0a6; }
body[data-theme] .text-gray-700 { color: #b7c3c9; }
body[data-theme] .text-gray-800 { color: #dfeaf2; }
body[data-theme] .text-gray-900 { color: #f2f7fa; }
body[data-theme] .text-primary-base { color: #00bfff; }
body[data-theme] .bg-primary-base { background-color: #00bfff; }
body[data-theme] .border-primary-base { border-color: #00bfff; }
body[data-theme] .border-blue-500 { border-color: #00bfff; }
body[data-theme] .c-post-filter-btn,
body[data-theme] .c-post-sort-btn {
  background-color: #1f2527;
  color: #b7c3c9;
  border-color: #2c3437;
  border-radius: 999px;
}

/* The header: flat, with the website's thin line under it. */
#c-header {
  background-color: #171c1d;
  border-bottom: 1px solid #2c3437;
  box-shadow: none;
}

/* Buttons: pills, like the website's download buttons. */
.c-button {
  border-radius: 999px;
}
.c-button--primary {
  color: #031016;
  font-weight: 600;
}
.c-button--primary:hover {
  color: #031016;
  background-color: #33ccff;
  border-color: #33ccff;
}

/* Inputs: the accent as the focus ring. */
.c-input:focus,
.c-textarea:focus,
.c-select:focus {
  border-color: #00bfff;
  box-shadow: 0 0 0 3px rgba(0, 191, 255, .18);
}

/* Links in posts and comments. */
.c-markdown a {
  color: #00bfff;
}

/* One look only, so the light/dark switch is not needed. */
.c-themeswitcher {
  display: none;
}
body[data-theme] .bg-white { background-color: #1f2527; }
body[data-theme] .bg-gray-50 { background-color: #1b2123; }
body[data-theme] .bg-gray-100 { background-color: #171c1d; }
body[data-theme] .bg-gray-200 { background-color: #232a2c; }
body[data-theme] .hover\:bg-gray-100:hover { background-color: #232a2c; }
body[data-theme] .hover\:bg-gray-200:hover { background-color: #2c3437; }
body[data-theme] .border-gray-200 { border-color: #2c3437; }
body[data-theme] .border-gray-400 { border-color: #3a4549; }
body[data-theme] .border-gray-700 { border-color: #93a0a6; }
body[data-theme] .text-gray-400 { color: #5d696e; }
body[data-theme] .bg-blue-50 { background-color: #06222c; }
body[data-theme] .bg-blue-100 { background-color: #0b3a4a; }
body[data-theme] .hover\:bg-blue-200:hover { background-color: #0f5870; }
body[data-theme] .border-blue-200 { border-color: #0b3a4a; }
body[data-theme] .border-blue-400 { border-color: #33ccff; }
body[data-theme] .text-blue-200 { color: #b3eaff; }
body[data-theme] .text-blue-600 { color: #33ccff; }
body[data-theme] .text-blue-700 { color: #7fdcff; }
body[data-theme] .text-blue-800 { color: #b3eaff; }
body[data-theme] .bg-primary-light { background-color: #0b3a4a; }
body[data-theme] .bg-primary-dark { background-color: #0099cc; }