/* Colih theme for Fider. Paste this entire file into Advanced > Custom CSS. */
/* Palette read from colih.net. Uses Fider's native light/dark theme setting. */

body,
body[data-theme="light"] {
  --primary-color: #313d5f !important;
  --primary-color-light: #e9ecf3 !important;
  --primary-color-dark: #41527f !important;
  --colors-primary-base: #313d5f !important;
  --colors-primary-light: #e9ecf3 !important;
  --colors-primary-dark: #41527f !important;
  --colors-white: #ffffff !important;
  --colors-black: #284469 !important;
  --colors-gray-50: #f4f6f9 !important;
  --colors-gray-100: #f4f6f9 !important;
  --colors-gray-200: #e9ecf3 !important;
  --colors-gray-300: #d3d9e7 !important;
  --colors-gray-400: #a7b3cf !important;
  --colors-gray-500: #51679f !important;
  --colors-gray-600: #51679f !important;
  --colors-gray-700: #55698a !important;
  --colors-gray-800: #55698a !important;
  --colors-gray-900: #284469 !important;
  --colih-on-primary: #ffffff;
  --colih-focus: #51679f;
  --colih-focus-ring: rgba(81, 103, 159, 0.18);
  --colih-card-shadow: 0 1px 3px rgba(40, 68, 105, 0.06);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background-color: var(--colors-gray-100);
  color: var(--colors-gray-800);
}

body[data-theme="dark"],
body.dark-theme {
  --primary-color: #a7b9da !important;
  --primary-color-light: #2d3e59 !important;
  --primary-color-dark: #dce6f6 !important;
  --colors-primary-base: #a7b9da !important;
  --colors-primary-light: #2d3e59 !important;
  --colors-primary-dark: #dce6f6 !important;
  --colors-white: #1b2940 !important;
  --colors-black: #dce6f6 !important;
  --colors-gray-50: #152135 !important;
  --colors-gray-100: #111c2e !important;
  --colors-gray-200: #2d3e59 !important;
  --colors-gray-300: #3b4a63 !important;
  --colors-gray-400: #7c8db7 !important;
  --colors-gray-500: #afbdd4 !important;
  --colors-gray-600: #afbdd4 !important;
  --colors-gray-700: #afbdd4 !important;
  --colors-gray-800: #dce6f6 !important;
  --colors-gray-900: #dce6f6 !important;
  --colih-on-primary: #111c2e;
  --colih-focus: #a7b9da;
  --colih-focus-ring: rgba(167, 185, 218, 0.24);
  --colih-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* Keep Fider's utility classes aligned with the palette, too. */
body .bg-white { background-color: var(--colors-white) !important; }
body .bg-gray-100 { background-color: var(--colors-gray-100) !important; }
body .bg-gray-200 { background-color: var(--colors-gray-200) !important; }
body .text-gray-500 { color: var(--colors-gray-500) !important; }
body .text-gray-600 { color: var(--colors-gray-600) !important; }
body .text-gray-700 { color: var(--colors-gray-700) !important; }
body .text-gray-800 { color: var(--colors-gray-800) !important; }
body .text-gray-900 { color: var(--colors-gray-900) !important; }

/* Header, cards, and the existing feedback layout. */
#c-header {
  background-color: var(--colors-white) !important;
  border-bottom-color: var(--colors-gray-300) !important;
}

.c-posts-container__post,
.p-home__add-idea-btn {
  background-color: var(--colors-white) !important;
  border: 1px solid var(--colors-gray-300) !important;
  border-radius: 12px !important;
  box-shadow: var(--colih-card-shadow) !important;
}

.c-posts-container__post:hover,
.p-home__add-idea-btn:hover {
  border-color: var(--colors-gray-400) !important;
}

.c-posts-container__post-title {
  font-weight: 700;
  letter-spacing: -0.015em;
}

.c-side-menu__item--active {
  background-color: var(--colors-primary-light) !important;
}

/* Colih's compact, slightly rounded controls. */
.c-button,
.c-input,
.c-textarea,
.c-select,
.c-post-filter-btn,
.c-post-sort-btn {
  border-radius: 6px !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.c-button {
  font-weight: 600;
}

.c-button--primary:not(.c-button--loading) {
  color: var(--colih-on-primary) !important;
}

.c-input,
.c-textarea,
.c-select,
.c-post-filter-btn,
.c-post-sort-btn {
  background-color: var(--colors-white) !important;
}

.c-input:focus,
.c-textarea:focus,
.c-select:focus {
  border-color: var(--colih-focus) !important;
  box-shadow: 0 0 0 3px var(--colih-focus-ring) !important;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--colih-focus);
  outline-offset: 3px;
}

/* Distinguish selected votes while retaining Fider's behavior. */
.c-vote-counter__button {
  background-color: var(--colors-primary-light) !important;
  border: 1px solid var(--colors-gray-300) !important;
  border-radius: 10px !important;
  color: var(--colors-primary-base) !important;
}

.c-vote-counter__icon {
  color: var(--colors-primary-base) !important;
}

.c-vote-counter__button--voted {
  background-color: var(--colors-primary-base) !important;
  border-color: var(--colors-primary-base) !important;
  color: var(--colih-on-primary) !important;
}

.c-vote-counter__button--voted .c-vote-counter__icon {
  color: var(--colih-on-primary) !important;
}

/* Leave status/error colors, layout, and feature availability to Fider. */