/* workinproduct.eu brand theme for Fider (roadmap.workinproduct.eu)
 *
 * Source of truth: app/globals.css oklch tokens, converted to hex.
 *   accent  oklch(0.55 0.15 270) -> #5069c8
 *   fg      oklch(0.15 0 0)      -> #0b0b0b
 *   border  oklch(0.92 0 0)      -> #e4e4e4
 * Fider exposes --primary-color / --primary-color-light / --primary-color-dark
 * per theme and derives buttons, links, vote counts and tags from them.
 * The gray scale is remapped from Fider's warm grays to WIP's pure neutrals.
 *
 * Font stays Fider's bundled Inter: the CSP (font-src 'self' data:) blocks
 * loading DM Sans from Google Fonts, and inlining it as data: URIs would bloat
 * every page. Colors carry the brand.
 *
 * Apply: paste into Admin > Site Settings > Custom CSS, or:
 *   ssh backend-vps "docker compose -f /opt/fider/docker-compose.yml exec -T db \
 *     psql -U fider -d fider" < <(sql wrapper — see docs/changelog 2026-07-26)
 */

body[data-theme="light"] {
  --primary-color: #5069c8;
  --primary-color-light: #c2d3ff;
  --primary-color-dark: #2f429d;

  --colors-gray-50: #f7f7f7;
  --colors-gray-100: #fdfdfd; /* page background */
  --colors-gray-200: #f0f0f0;
  --colors-gray-300: #e4e4e4; /* borders */
  --colors-gray-400: #d4d4d4;
  --colors-gray-500: #bdbdbd;
  --colors-gray-600: #8f8f8f;
  --colors-gray-700: #555555; /* body + muted text */
  --colors-gray-800: #262626;
  --colors-gray-900: #0b0b0b;
  --colors-black: #0b0b0b;
}

body[data-theme="dark"] {
  --primary-color: #93aaf4;
  --primary-color-light: #2a3764;
  --primary-color-dark: #bccfff;
}

/* Fider hardcodes a blue rgba focus ring next to the variable border color */
*:focus:not(.no-focus) {
  box-shadow: 0 0 0 3px rgba(80, 105, 200, 0.15) !important;
}