/* ==========================================================================
   SaucerJam Community — Fider custom theme
   Matches the game palette in saucerjam/src/styles/main.css
   Paste into:  Fider admin -> Advanced -> Custom CSS
   Palette: void #070c1b · panel #0c1628 · line #2b4058 · ink #e8f3fc
            muted #9dafc2 · cyan #5eeaff · orange #ffae69
   ========================================================================== */
/* ---------- 1. Palette tokens (override Fider's per-theme token sets) ---- */
body[data-theme=light],
body[data-theme=dark] {
  --sj-void:        #070c1b;
  --sj-void-2:      #0a1224;
  --sj-panel:       #0c1628;
  --sj-panel-2:     #12203a;
  --sj-line:        #2b4058;
  --sj-line-soft:   #1c2b40;
  --sj-ink:         #e8f3fc;
  --sj-ink-2:       #c3d3e3;
  --sj-muted:       #9dafc2;
  --sj-dot:         #6d7f92;
  --sj-cyan:        #5eeaff;
  --sj-cyan-soft:   #a3eaf4;
  --sj-cyan-pale:   #cdf7ff;
  --sj-cyan-deep:   #0f2438;
  --sj-orange:      #ffae69;
  --sj-green:       #95ff9f;
  --sj-pink:        #ff7199;
  --sj-pale:        #e0eab6;
  /* Fider core tokens */
  --primary-color:        var(--sj-cyan)      !important;
  --primary-color-dark:   var(--sj-cyan-soft) !important;
  --primary-color-light:  var(--sj-cyan-pale) !important;
  --colors-primary-base:  var(--sj-cyan)      !important;
  --colors-primary-dark:  var(--sj-cyan-soft) !important;
  --colors-primary-light: var(--sj-cyan-pale) !important;
  --colors-white: var(--sj-panel)  !important;
  --colors-black: var(--sj-ink)    !important;
  --colors-gray-50:  #0a1224 !important;
  --colors-gray-100: #070c1b !important;
  --colors-gray-200: #12203a !important;
  --colors-gray-300: #1b2c47 !important;
  --colors-gray-400: #35506e !important;
  --colors-gray-500: #6d7f92 !important;
  --colors-gray-600: #8697a8 !important;
  --colors-gray-700: #c3d3e3 !important;
  --colors-gray-800: #d5e3f1 !important;
  --colors-gray-900: #e8f3fc !important;
  --colors-blue-50:  #0b1b2e !important;
  --colors-blue-100: #0f2438 !important;
  --colors-blue-200: #16324b !important;
  --colors-blue-300: #1f4a68 !important;
  --colors-blue-400: #3d7f97 !important;
  --colors-blue-500: #5eeaff !important;
  --colors-blue-600: #7ef0ff !important;
  --colors-blue-700: #a3eaf4 !important;
  --colors-blue-800: #cdf7ff !important;
  --colors-blue-900: #e6fbff !important;
  --colors-green-50:  #0b2b18 !important;
  --colors-green-100: #0b2b18 !important;
  --colors-green-200: #12492a !important;
  --colors-green-300: #1d6b3c !important;
  --colors-green-400: #3f8f5a !important;
  --colors-green-500: #95ff9f !important;
  --colors-green-600: #95ff9f !important;
  --colors-green-700: #b6ffbe !important;
  --colors-green-800: #d7ffdb !important;
  --colors-green-900: #eaffec !important;
  --colors-red-50:  #2c0c17 !important;
  --colors-red-100: #3a1020 !important;
  --colors-red-200: #5c1a2e !important;
  --colors-red-300: #7a2438 !important;
  --colors-red-400: #b93a56 !important;
  --colors-red-500: #ff7199 !important;
  --colors-red-600: #ff7199 !important;
  --colors-red-700: #ff9ab5 !important;
  --colors-red-800: #ffc2d1 !important;
  --colors-red-900: #ffe0e8 !important;
  --colors-yellow-50:  #2a1d10 !important;
  --colors-yellow-100: #3a2612 !important;
  --colors-yellow-200: #55381c !important;
  --colors-yellow-300: #8a5a2a !important;
  --colors-yellow-400: #c98a4a !important;
  --colors-yellow-500: #ffae69 !important;
  --colors-yellow-600: #ffae69 !important;
  --colors-yellow-700: #ffc79a !important;
  --colors-yellow-800: #ffd9b0 !important;
  --colors-yellow-900: #ffe9d3 !important;
}
/* ---------- 2. Type + base surfaces -------------------------------------- */
body,
input,
textarea,
button,
select {
  font-family: "Avenir Next", Avenir, "Segoe UI", ui-sans-serif, system-ui, sans-serif !important;
}
body {
  background-color: var(--sj-void) !important;
  color: var(--sj-ink-2) !important;
  letter-spacing: 0.005em;
}
h1, h2, h3, h4, h5,
.text-title, .text-header, .text-display1, .text-display2 {
  color: var(--sj-ink) !important;
  letter-spacing: -0.01em;
}
.text-body    { color: var(--sj-ink-2) !important; }
.text-subtitle,
.text-category { color: var(--sj-muted) !important; }
.text-muted   { color: var(--sj-muted) !important; }
.text-link,
a             { color: var(--sj-cyan) !important; }
.text-link:hover,
a:hover       { color: var(--sj-cyan-pale) !important; }
::selection { background: rgba(94, 234, 255, 0.28); color: var(--sj-ink); }
/* ---------- 3. Utility class overrides (both themes repaint alike) ------- */
body[data-theme=light] .bg-white,
body[data-theme=dark]  .bg-white  { background-color: var(--sj-panel) !important; }
body[data-theme=light] .bg-gray-50,
body[data-theme=dark]  .bg-gray-50  { background-color: var(--sj-void-2) !important; }
body[data-theme=light] .bg-gray-100,
body[data-theme=dark]  .bg-gray-100 { background-color: var(--sj-void) !important; }
body[data-theme=light] .bg-gray-200,
body[data-theme=dark]  .bg-gray-200 { background-color: var(--sj-panel-2) !important; }
body[data-theme=light] .hover\:bg-gray-100:hover,
body[data-theme=dark]  .hover\:bg-gray-100:hover { background-color: var(--sj-panel-2) !important; }
body[data-theme=light] .hover\:bg-gray-200:hover,
body[data-theme=dark]  .hover\:bg-gray-200:hover { background-color: #16253f !important; }
body[data-theme=light] .bg-blue-50,
body[data-theme=dark]  .bg-blue-50  { background-color: #0b1b2e !important; }
body[data-theme=light] .bg-blue-100,
body[data-theme=dark]  .bg-blue-100 { background-color: var(--sj-cyan-deep) !important; }
body[data-theme=light] .hover\:bg-blue-200:hover,
body[data-theme=dark]  .hover\:bg-blue-200:hover { background-color: #16324b !important; }
body[data-theme=light] .bg-green-100,
body[data-theme=dark]  .bg-green-100 { background-color: #0b2b18 !important; }
body[data-theme=light] .bg-green-200,
body[data-theme=dark]  .bg-green-200 { background-color: #12492a !important; }
body[data-theme=light] .bg-red-100,
body[data-theme=dark]  .bg-red-100   { background-color: #3a1020 !important; }
body[data-theme=light] .bg-yellow-50,
body[data-theme=dark]  .bg-yellow-50,
body[data-theme=light] .bg-yellow-100,
body[data-theme=dark]  .bg-yellow-100 { background-color: #3a2612 !important; }
body[data-theme=light] .border-gray-200,
body[data-theme=dark]  .border-gray-200 { border-color: #24374f !important; }
body[data-theme=light] .border-gray-400,
body[data-theme=dark]  .border-gray-400 { border-color: #35506e !important; }
body[data-theme=light] .border-gray-700,
body[data-theme=dark]  .border-gray-700 { border-color: #7d93a9 !important; }
body[data-theme=light] .border-primary-base,
body[data-theme=dark]  .border-primary-base { border-color: var(--sj-cyan) !important; }
body[data-theme=light] .border-blue-200,
body[data-theme=dark]  .border-blue-200 { border-color: var(--sj-line) !important; }
body[data-theme=light] .border-blue-400,
body[data-theme=dark]  .border-blue-400 { border-color: #3d7f97 !important; }
body[data-theme=light] .border-blue-500,
body[data-theme=dark]  .border-blue-500 { border-color: var(--sj-cyan) !important; }
body[data-theme=light] .border-green-400,
body[data-theme=dark]  .border-green-400 { border-color: #3f8f5a !important; }
body[data-theme=light] .border-red-300,
body[data-theme=dark]  .border-red-300 { border-color: #7a2438 !important; }
body[data-theme=light] .border-yellow-400,
body[data-theme=dark]  .border-yellow-400 { border-color: #8a5a2a !important; }
body[data-theme=light] .border-yellow-500,
body[data-theme=dark]  .border-yellow-500 { border-color: var(--sj-orange) !important; }
body[data-theme=light] .text-gray-900,
body[data-theme=dark]  .text-gray-900 { color: var(--sj-ink) !important; }
body[data-theme=light] .text-gray-800,
body[data-theme=dark]  .text-gray-800 { color: #d5e3f1 !important; }
body[data-theme=light] .text-gray-700,
body[data-theme=dark]  .text-gray-700 { color: var(--sj-ink-2) !important; }
body[data-theme=light] .text-gray-600,
body[data-theme=dark]  .text-gray-600 { color: var(--sj-muted) !important; }
body[data-theme=light] .text-gray-500,
body[data-theme=dark]  .text-gray-500 { color: #8697a8 !important; }
body[data-theme=light] .text-gray-400,
body[data-theme=dark]  .text-gray-400 { color: var(--sj-dot) !important; }
body[data-theme=light] .text-primary-base,
body[data-theme=dark]  .text-primary-base { color: var(--sj-cyan) !important; }
body[data-theme=light] .text-blue-200,
body[data-theme=dark]  .text-blue-200 { color: var(--sj-cyan-pale) !important; }
body[data-theme=light] .text-blue-600,
body[data-theme=dark]  .text-blue-600 { color: #7ef0ff !important; }
body[data-theme=light] .text-blue-700,
body[data-theme=dark]  .text-blue-700 { color: var(--sj-cyan-soft) !important; }
body[data-theme=light] .text-blue-800,
body[data-theme=dark]  .text-blue-800 { color: var(--sj-cyan-pale) !important; }
body[data-theme=light] .text-green-500,
body[data-theme=dark]  .text-green-500,
body[data-theme=light] .text-green-600,
body[data-theme=dark]  .text-green-600 { color: var(--sj-green) !important; }
body[data-theme=light] .text-green-700,
body[data-theme=dark]  .text-green-700 { color: #b6ffbe !important; }
body[data-theme=light] .text-green-800,
body[data-theme=dark]  .text-green-800 { color: #d7ffdb !important; }
body[data-theme=light] .text-red-500,
body[data-theme=dark]  .text-red-500,
body[data-theme=light] .text-red-600,
body[data-theme=dark]  .text-red-600 { color: var(--sj-pink) !important; }
body[data-theme=light] .text-red-700,
body[data-theme=dark]  .text-red-700 { color: #ff9ab5 !important; }
body[data-theme=light] .text-red-800,
body[data-theme=dark]  .text-red-800 { color: #ffc2d1 !important; }
body[data-theme=light] .text-yellow-500,
body[data-theme=dark]  .text-yellow-500 { color: var(--sj-orange) !important; }
body[data-theme=light] .text-yellow-800,
body[data-theme=dark]  .text-yellow-800 { color: #ffd9b0 !important; }
/* text-white sits on the cyan primary button -> deep ink for contrast */
body[data-theme=light] .text-white,
body[data-theme=dark]  .text-white { color: #06131f !important; }
/* ---------- 4. Header / nav --------------------------------------------- */
.c-header {
  background-color: rgba(9, 16, 32, 0.86) !important;
  border-bottom: 1px solid var(--sj-line-soft) !important;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.c-header a { color: var(--sj-ink) !important; }
.c-header a:hover { color: var(--sj-cyan) !important; }
/* ---------- 5. Buttons -------------------------------------------------- */
.c-button {
  border-radius: 7px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.1s ease !important;
}
.c-button--primary {
  background-color: var(--sj-cyan) !important;
  background-image: linear-gradient(180deg, #a3eaf4, var(--sj-cyan)) !important;
  border: 1px solid var(--sj-cyan-soft) !important;
  color: #06131f !important;
  box-shadow: 0 0 0 rgba(94, 234, 255, 0);
}
.c-button--primary:hover {
  background-image: linear-gradient(180deg, #cdf7ff, var(--sj-cyan-soft)) !important;
  box-shadow: 0 0 18px rgba(94, 234, 255, 0.35);
}
.c-button--default,
.c-button--secondary {
  background-color: #17263c !important;
  border: 1px solid #405873 !important;
  color: var(--sj-ink) !important;
}
.c-button--default:hover,
.c-button--secondary:hover {
  background-color: #253c55 !important;
  border-color: #6b91af !important;
}
.c-button--tertiary,
.c-button--link { color: var(--sj-cyan) !important; }
.c-button--danger {
  background-color: var(--sj-pink) !important;
  border-color: var(--sj-pink) !important;
  color: #2a0512 !important;
}
.c-button:focus-visible,
.c-input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--sj-cyan) !important;
  outline-offset: 2px;
}
/* ---------- 6. Inputs, selects, editors --------------------------------- */
.c-input,
.c-select,
.c-markdown-textarea,
input[type=text], input[type=email], input[type=search], textarea {
  background-color: #080f20 !important;
  border: 1px solid #405873 !important;
  border-radius: 8px !important;
  color: var(--sj-ink) !important;
}
.c-input::placeholder,
textarea::placeholder { color: #6d7f92 !important; }
.c-input:focus,
.c-select:focus,
.c-markdown-textarea:focus {
  border-color: var(--sj-cyan) !important;
  box-shadow: 0 0 0 3px rgba(94, 234, 255, 0.18) !important;
}
.c-comment-input-card,
.c-comment-input,
.c-form-field { border-color: var(--sj-line-soft) !important; }
/* ---------- 7. Cards, modals, dropdowns --------------------------------- */
.c-modal-dimmer { background-color: rgba(4, 8, 18, 0.72) !important; }
.c-modal-window,
.c-modal-content {
  background-color: var(--sj-panel) !important;
  border: 1px solid var(--sj-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}
.c-modal-header,
.c-modal-footer { border-color: var(--sj-line-soft) !important; }
.c-dropdown {
  background-color: var(--sj-panel) !important;
  border: 1px solid var(--sj-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}
/* ---------- 8. Tags, badges, reactions, votes --------------------------- */
.c-tag {
  background-color: rgba(94, 234, 255, 0.08) !important;
  border: 1px solid rgba(94, 234, 255, 0.35) !important;
  color: var(--sj-cyan-soft) !important;
  border-radius: 999px !important;
  font-weight: 600;
}
.c-tag:hover { background-color: rgba(94, 234, 255, 0.16) !important; }
.c-reactions { border-color: var(--sj-line-soft) !important; }
.c-signin-social-button {
  background-color: #17263c !important;
  border: 1px solid #405873 !important;
  border-radius: 8px !important;
  color: var(--sj-ink) !important;
}
.c-signin-social-button:hover {
  background-color: #253c55 !important;
  border-color: var(--sj-cyan) !important;
}
/* ---------- 9. Messages / states ---------------------------------------- */
.c-message { border-radius: 8px !important; }
.c-message--success { background-color: rgba(149, 255, 159, 0.10) !important; color: #d7ffdb !important; }
.c-message--error   { background-color: rgba(255, 113, 153, 0.12) !important; color: #ffc2d1 !important; }
.c-message--warning { background-color: rgba(255, 174, 105, 0.12) !important; color: #ffd9b0 !important; }
/* ---------- 10. Markdown content ---------------------------------------- */
.c-markdown a { color: var(--sj-cyan) !important; text-decoration-color: rgba(94, 234, 255, 0.4); }
.c-markdown code,
.c-markdown pre {
  background-color: #080f20 !important;
  border: 1px solid var(--sj-line-soft) !important;
  border-radius: 6px !important;
  color: var(--sj-pale) !important;
}
.c-markdown blockquote {
  border-left: 3px solid var(--sj-cyan) !important;
  color: var(--sj-muted) !important;
}
.c-markdown hr, .c-divider { border-color: var(--sj-line-soft) !important; }
/* ---------- 11. Scrollbars + misc chrome -------------------------------- */
* { scrollbar-color: #2b4058 #070c1b; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #070c1b; }
::-webkit-scrollbar-thumb { background: #2b4058; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3d5b7a; }
img, .c-avatar { border-radius: 8px; }
.c-avatar { border: 1px solid var(--sj-line-soft); }
.c-powered { opacity: 0.75; }