/* Inference Cooperative theme for Open WebUI — v4
   House style: cream #faf8f5, ink #2d3327, greens #5b8c5a/#6ba86b/#7ab87a,
   bronze #a97a4a. Figtree served same-origin. No decorative dots (removed at
   operator request); color scheme only, matching the dashboard and admin panel.

   Served via the boot watchdog: Open WebUI's startup overwrites custom.css
   (empty build copy), so this file lives as /static/coop.css and the watchdog
   writes a one-line @import into custom.css. */

/* ---------- Font (same-origin, no CORS needed) ---------- */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/figtree-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/figtree-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/figtree-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/figtree-700.woff2') format('woff2');
}

html, body {
  font-family: 'Figtree', -apple-system, 'Segoe UI', system-ui, sans-serif !important;
}

/* ---------- Light mode: cream surfaces, readable text ---------- */
html:not(.dark) body {
  background-color: #faf8f5 !important;
}
/* App shell + main content pane: Open WebUI paints these with its own opaque
   bg (bg-white / bg-gray-900) — the sidebar alone isn't the whole story. */
html:not(.dark) div[class*="h-screen"][class*="bg-white"],
html:not(.dark) div[class*="min-h-[100dvh]"][class*="bg-white"] {
  background-color: #faf8f5 !important;
}
html:not(.dark) #sidebar {
  background: linear-gradient(180deg, #f6f3ee 0%, #f1ede5 100%) !important;
  border-right: 1px solid #e4e0d8 !important;
}
html:not(.dark) .markdown-prose {
  color: #262b21;
}

/* ---------- Dark mode: warm greens, bright text ---------- */
html.dark body {
  background-color: #1f241b !important;
}
html.dark div[class*="h-screen"][class*="bg-gray-900"],
html.dark div[class*="min-h-[100dvh]"][class*="bg-gray-900"] {
  background-color: #1f241b !important;
}
html.dark #sidebar {
  background: linear-gradient(180deg, #262b21 0%, #1f241b 100%) !important;
  border-right: 1px solid #3e4636 !important;
}
html.dark .markdown-prose {
  color: #f0f3ea;
}

/* ---------- Accent: co-op green (emerald token family) ---------- */
:root {
  --color-emerald-300: #7ab87a;
  --color-emerald-400: #6ba86b;
  --color-emerald-500: #5b8c5a;
  --color-emerald-600: #4e7a4d;
}

/* Primary buttons (submit arrow, CTAs) */
button.bg-black, .btn-primary {
  background-color: #5b8c5a !important;
  color: #fff !important;
}
button.bg-black:hover, .btn-primary:hover {
  background-color: #4e7a4d !important;
}

/* Toggles / selected states */
.peer:checked ~ .bg-emerald-500,
.bg-emerald-500 {
  background-color: #6ba86b !important;
}

/* User message bubble: soft green tint */
html:not(.dark) div.bg-gray-100[class*="rounded"] {
  background-color: #eaf3ea !important;
}
html.dark div.bg-gray-100[class*="rounded"] {
  background-color: #333a2d !important;
}

/* ---------- Code blocks ---------- */
.codeblock {
  border-radius: 12px !important;
  border: 1px solid #e4e0d8;
}
html.dark .codeblock {
  border-color: #3e4636;
}
pre, code {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace !important;
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c9d3c5; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #6ba86b; }
html.dark ::-webkit-scrollbar-thumb { background: #3e4636; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #6ba86b; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Selection ---------- */
::selection { background: #cfe4cf; }
html.dark ::selection { background: #3e5a3d; }

/* ---------- Links ---------- */
html:not(.dark) a { color: #3f6e3e; }
html.dark a { color: #8fc98f; }