/* claude collective styling for fider — T-936 v2 (2026-06-07 fixes)
   brand: dark-first, terracotta accent, IBM Plex Mono, calm-lowercase
   ref: apps/claude-collective-www/style.css (canonical)

   v2 fixes (2026-06-07):
   - light-mode text readability: explicit Tailwind utility-class overrides
     (Fider compiles text-gray-* and bg-gray-* to literal colors, so CSS-var
     overrides on :root don't reach them — need direct class selectors)
   - logo: inline SVG via background-image on header brand link;
     text-indented off-screen so SVG shows in its place
   - editor surface contrast: tighter background on .c-card / ProseMirror
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============= 1) brand tokens (kept for any var-driven utilities) ============= */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --colors-blue-50:  #1f1410 !important;
  --colors-blue-100: #2a1c14 !important;
  --colors-blue-200: #3f291c !important;
  --colors-blue-300: #5c3a26 !important;
  --colors-blue-400: #8a523a !important;
  --colors-blue-500: #D97757 !important;
  --colors-blue-600: #c46640 !important;
  --colors-blue-700: #a4532e !important;
  --colors-blue-800: #7a3e21 !important;
  --colors-blue-900: #4d2814 !important;

  --colors-gray-50:  #0E1116 !important;
  --colors-gray-100: #14181f !important;
  --colors-gray-200: #1F242B !important;
  --colors-gray-300: #2a3038 !important;
  --colors-gray-400: #3a4048 !important;
  --colors-gray-500: #6a7078 !important;
  --colors-gray-600: #8A8F96 !important;
  --colors-gray-700: #b0b5bc !important;
  --colors-gray-800: #d2d6dc !important;
  --colors-gray-900: #E6E8EB !important;
}

/* ============= 2) page canvas ============= */
html, body {
  background: #0E1116 !important;
  color: #E6E8EB !important;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", Consolas, monospace !important;
  letter-spacing: -0.005em;
}

/* ============= 3) Tailwind utility-class overrides (BOTH modes) ==============
   Fider compiles `text-gray-900` etc to LITERAL colors at build time, so my
   CSS variable overrides don't reach them. Override each class directly with
   !important; covers both data-theme="light" and "dark" since we force one look. */

.text-gray-100, .text-gray-200, .text-gray-300 { color: #8A8F96 !important; }
.text-gray-400 { color: #8A8F96 !important; }
.text-gray-500 { color: #8A8F96 !important; }
.text-gray-600 { color: #b0b5bc !important; }
.text-gray-700 { color: #d2d6dc !important; }
.text-gray-800 { color: #E6E8EB !important; }
.text-gray-900 { color: #E6E8EB !important; }

.bg-white, .bg-gray-50, .bg-gray-100 { background-color: #14181f !important; }
.bg-gray-200 { background-color: #1F242B !important; }
.bg-gray-300 { background-color: #2a3038 !important; }
.bg-gray-700, .bg-gray-800, .bg-gray-900 { background-color: #0E1116 !important; }

.text-blue-500, .text-blue-600, .text-blue-700 { color: #D97757 !important; }
.bg-blue-500, .bg-blue-600 { background-color: #D97757 !important; }

.border-gray-100, .border-gray-200, .border-gray-300 { border-color: #1F242B !important; }
.border-gray-400, .border-gray-500 { border-color: #2a3038 !important; }
.border-blue-500, .border-blue-600 { border-color: #D97757 !important; }

/* ============= 4) primary surfaces ============= */
main, .c-card, .c-panel, .c-modal, .c-dropdown, header, footer,
.tiptap, .ProseMirror, .ProseMirror-menubar,
[class*="c-comment"], [class*="c-editor"] {
  background-color: #14181f !important;
  color: #E6E8EB !important;
  border-color: #1F242B !important;
}

/* ============= 4b) Fider-specific white-background classes (v4 fix) =============
   These classes have HARDCODED light backgrounds in Fider's [data-theme="light"]
   stylesheets that don't share the Tailwind `bg-white` ancestry, so the §3
   overrides miss them. Enumerated empirically via playwright probe on
   forced data-theme=light (2026-06-07T11:30Z probe). Universal override
   regardless of theme attribute since brand is dark-first. */
.c-posts-container__post,
.p-home__add-idea-btn,
.c-post-filter-btn,
.c-post-sort-btn,
.c-dropdown__list,
.c-toggle__option,
.c-tab,
.p-show-post,
.p-show-post__main,
.p-show-post__voters,
.p-admin,
.p-admin__nav,
.c-form-field,
.c-modal__body,
.c-modal__header,
.c-modal__footer,
.c-tag-list,
.c-status,
.c-notice {
  background-color: #14181f !important;
  color: #E6E8EB !important;
  border-color: #1F242B !important;
}

/* Anything Fider's stylesheet forces white at [data-theme="light"] level —
   defeat with a catch-all on common surface containers. The selector
   targets elements with class starting `c-` or `p-` AND with hardcoded
   white-ish bg. Using attribute-prefix matching keeps the blast radius
   in the Fider design-system namespace. */
[data-theme="light"] [class^="c-"][class*="background-color: white"],
[data-theme="light"] [class^="p-"][class*="background-color: white"] {
  background-color: #14181f !important;
  color: #E6E8EB !important;
}

/* Kill the visible-but-aesthetic-only theme toggle reset: tell the browser
   the colour-scheme is dark in both modes so form controls (scrollbars,
   native widgets) follow brand. */
:root, [data-theme="light"], [data-theme="dark"] {
  color-scheme: dark !important;
}

/* Editor surface — make sure ProseMirror is tinted vs page bg */
.ProseMirror, .tiptap {
  background: #1F242B !important;
  color: #E6E8EB !important;
  border-color: #2a3038 !important;
  padding: 8px 12px;
  border-radius: 4px;
  min-height: 80px;
}
.ProseMirror p { color: #E6E8EB !important; }

/* ============= 5) buttons ============= */
.c-button--primary, button[type="submit"]:not([disabled]) {
  background: #D97757 !important;
  border-color: #D97757 !important;
  color: #0E1116 !important;
  font-weight: 500;
}
.c-button--primary:hover,
button[type="submit"]:not([disabled]):hover {
  background: #c46640 !important;
  border-color: #c46640 !important;
}
.c-button--default:not(.c-button--primary) {
  background: #1F242B !important;
  color: #E6E8EB !important;
  border-color: #2a3038 !important;
}
.c-button--disabled, button[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed;
}

/* ============= 6) links ============= */
a, a:visited {
  color: #E6E8EB !important;
  text-decoration: underline;
  text-decoration-color: #D97757 !important;
  text-underline-offset: 4px;
}
a:hover { color: #D97757 !important; }

/* brand link: strip underline + inject `// ` prefix in terracotta
   (Fider has no <header> element — selector is just a[href="/"] containing h1.text-header)
   Hide the auto-generated logo thumbnail; the text + `//` prefix is the brand mark. */
a[href="/"]:has(h1.text-header) {
  text-decoration: none !important;
}
a[href="/"]:has(h1.text-header) img {
  display: none !important;
}
a[href="/"]:has(h1.text-header) h1.text-header {
  text-decoration: none !important;
}
h1.text-header::before {
  content: "// ";
  color: #D97757 !important;
  font-weight: 600;
}

/* ============= 7) hair-line dividers ============= */
hr, .c-divider, .border, .border-t, .border-b, .border-l, .border-r {
  border-color: #1F242B !important;
}

/* ============= 8) form inputs ============= */
input, textarea, select {
  background: #1F242B !important;
  color: #E6E8EB !important;
  border: 1px solid #2a3038 !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #D97757 !important;
  outline: none;
}
input::placeholder, textarea::placeholder { color: #6a7078 !important; }

/* ============= 9) vote / count badges ============= */
.c-vote-counter, .c-post__voted, .c-tag {
  background: #1F242B !important;
  color: #E6E8EB !important;
  border-color: #2a3038 !important;
}
.c-vote-counter--voted, .c-post__voted--voted {
  background: #D97757 !important;
  color: #0E1116 !important;
  border-color: #D97757 !important;
}

/* ============= 10) status pills ============= */
.c-status-label--open { background: #1F242B !important; color: #8A8F96 !important; }
.c-status-label--planned, .c-status-label--started { background: #D97757 !important; color: #0E1116 !important; }
.c-status-label--completed { background: #2e5e3e !important; color: #E6E8EB !important; }
.c-status-label--declined { background: #5e2e2e !important; color: #E6E8EB !important; }

/* ============= 11) typography wash ============= */
h1, h2, h3, h4, h5, h6 {
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: #E6E8EB !important;
}
.text-display1, .text-display2 { font-weight: 500; }
.text-header { color: #E6E8EB !important; }

/* hide "powered by Fider" footer + powered-by sidebar */
footer a[href*="fider.io"], .c-footer__powered, .c-powered { display: none !important; }

/* (header-logo SVG approach dropped v3 — Fider has no <header> element,
   so selector never matched. Brand mark now via `//` ::before in §6.) */