/*
 * dashbrd.io palette for Fider (feedback.dashbrd.io)
 * Paste into: Administration -> Site Settings -> Advanced -> Custom CSS
 *
 * Generated from Fider's compiled theme (main.4e3482b235bc3a0d70cc.css) and
 * dashbrd.io's tokens (packages/ui/shared/src/styles/themes/variables.css).
 * Fider switches themes via body[data-theme="light|dark"] (user toggle),
 * not prefers-color-scheme, so both variants are keyed on that attribute.
 */

/* Fider's own hook for the brand colour (buttons, links, focus, vote state). */
body[data-theme] {
  --primary-color: oklch(0.64 0.205 265);
}
body[data-theme="light"] {
  --primary-color-light: oklch(0.9 0.05 265);
  --primary-color-dark: oklch(0.52 0.2 265);
  --colors-gray-50: oklch(0.985 0.003 240);
  --colors-gray-100: oklch(0.985 0.003 240);
  --colors-gray-200: oklch(0.97 0.005 240);
  --colors-gray-300: oklch(0.91 0.01 240);
  --colors-gray-400: oklch(0.865 0.013 250);
  --colors-gray-500: oklch(0.82 0.016 250);
  --colors-gray-600: oklch(0.691 0.018 250);
  --colors-gray-700: oklch(0.56 0.018 250);
  --colors-gray-800: oklch(0.381 0.023 260);
  --colors-gray-900: oklch(0.19 0.025 260);
  --colors-blue-50: oklch(0.983 0.04 265);
  --colors-blue-100: oklch(0.973 0.044 265);
  --colors-blue-200: oklch(0.877 0.088 265);
  --colors-blue-300: oklch(0.788 0.128 265);
  --colors-blue-400: oklch(0.707 0.165 265);
  --colors-blue-500: oklch(0.64 0.205 265);
  --colors-blue-600: oklch(0.519 0.159 265);
  --colors-blue-700: oklch(0.424 0.116 265);
  --colors-blue-800: oklch(0.329 0.072 265);
  --colors-blue-900: oklch(0.213 0.02 265);
  --colors-red-50: oklch(0.969 0.055 30);
  --colors-red-100: oklch(0.933 0.07 30);
  --colors-red-200: oklch(0.88 0.093 30);
  --colors-red-300: oklch(0.801 0.126 30);
  --colors-red-400: oklch(0.7 0.19 30);
  --colors-red-500: oklch(0.627 0.18 30);
  --colors-red-600: oklch(0.568 0.156 30);
  --colors-red-700: oklch(0.498 0.126 30);
  --colors-red-800: oklch(0.437 0.1 30);
  --colors-red-900: oklch(0.39 0.08 30);
  --colors-green-50: oklch(0.978 0.082 162);
  --colors-green-100: oklch(0.953 0.089 162);
  --colors-green-200: oklch(0.907 0.103 162);
  --colors-green-300: oklch(0.84 0.13 162);
  --colors-green-400: oklch(0.772 0.143 162);
  --colors-green-500: oklch(0.697 0.134 162);
  --colors-green-600: oklch(0.605 0.106 162);
  --colors-green-700: oklch(0.508 0.078 162);
  --colors-green-800: oklch(0.432 0.055 162);
  --colors-green-900: oklch(0.378 0.039 162);
  --colors-white: oklch(1 0 0);
  --colors-black: oklch(0.19 0.025 260);
}
body[data-theme="dark"] {
  --primary-color-light: oklch(0.42 0.13 265);
  --primary-color-dark: oklch(0.56 0.19 265);
  --colors-gray-50: oklch(0.13 0.005 240);
  --colors-gray-100: oklch(0.18 0.03 260);
  --colors-gray-200: oklch(0.215 0.028 260);
  --colors-gray-300: oklch(0.255 0.025 260);
  --colors-gray-400: oklch(0.355 0.02 260);
  --colors-gray-500: oklch(0.41 0.016 250);
  --colors-gray-600: oklch(0.548 0.018 250);
  --colors-gray-700: oklch(0.66 0.018 248);
  --colors-gray-800: oklch(0.774 0.023 260);
  --colors-gray-900: oklch(0.975 0.004 240);
  --colors-blue-50: oklch(0.245 0.034 265);
  --colors-blue-100: oklch(0.245 0.034 265);
  --colors-blue-200: oklch(0.2 0.02 265);
  --colors-blue-300: oklch(0.299 0.059 265);
  --colors-blue-400: oklch(0.381 0.096 265);
  --colors-blue-500: oklch(0.458 0.131 265);
  --colors-blue-600: oklch(0.542 0.17 265);
  --colors-blue-700: oklch(0.64 0.205 265);
  --colors-blue-800: oklch(0.796 0.125 265);
  --colors-blue-900: oklch(0.914 0.071 265);
  --colors-red-50: oklch(0.288 0.037 30);
  --colors-red-100: oklch(0.288 0.037 30);
  --colors-red-200: oklch(0.39 0.08 30);
  --colors-red-300: oklch(0.437 0.1 30);
  --colors-red-400: oklch(0.498 0.126 30);
  --colors-red-500: oklch(0.568 0.156 30);
  --colors-red-600: oklch(0.627 0.18 30);
  --colors-red-700: oklch(0.7 0.19 30);
  --colors-red-800: oklch(0.801 0.126 30);
  --colors-red-900: oklch(0.88 0.093 30);
  --colors-green-50: oklch(0.306 0.02 162);
  --colors-green-100: oklch(0.306 0.02 162);
  --colors-green-200: oklch(0.378 0.039 162);
  --colors-green-300: oklch(0.432 0.055 162);
  --colors-green-400: oklch(0.508 0.078 162);
  --colors-green-500: oklch(0.697 0.134 162);
  --colors-green-600: oklch(0.772 0.143 162);
  --colors-green-700: oklch(0.84 0.13 162);
  --colors-green-800: oklch(0.907 0.103 162);
  --colors-green-900: oklch(0.953 0.089 162);
  --colors-white: oklch(0.215 0.028 260);
  --colors-black: oklch(0.867 0.012 250);
}

/* dashbrd.io puts --primary-foreground on primary in both themes; Fider's dark
   theme would use its darkest surface (--colors-white) here instead. */
body[data-theme] .c-button--primary,
body[data-theme] .c-button--primary:hover {
  color: oklch(0.985 0 0);
}

/* Contrast: dashbrd.io's primary with white text is 3.5:1 -- the same as the
   app, but under WCAG AA 4.5:1 for Fider's 16px/500 button labels. To trade
   brand fidelity for AA, uncomment (deeper indigo, 5.8:1):
*/
body[data-theme] .c-button--primary { background-color: oklch(0.52 0.2 265); border-color: oklch(0.52 0.2 265); }
body[data-theme] .c-button--primary:hover { background-color: oklch(0.45 0.18 265); }


/* Utility classes compiled with literal hex values. */
body[data-theme] .bg-gray-100 {
  background-color: var(--colors-gray-100);
}
body[data-theme] .hover\:bg-gray-100:hover {
  background-color: var(--colors-gray-100);
}
body[data-theme] .bg-gray-200 {
  background-color: var(--colors-gray-200);
}
body[data-theme] .hover\:bg-gray-200:hover {
  background-color: var(--colors-gray-200);
}
body[data-theme] .border-gray-200 {
  border-color: var(--colors-gray-200);
}
body[data-theme] .text-gray-400 {
  color: var(--colors-gray-400);
}
body[data-theme] .border-gray-400 {
  border-color: var(--colors-gray-400);
}
body[data-theme] .text-gray-500 {
  color: var(--colors-gray-500);
}
body[data-theme] .text-gray-600 {
  color: var(--colors-gray-600);
}
body[data-theme] .text-gray-700 {
  color: var(--colors-gray-700);
}
body[data-theme] .border-gray-700 {
  border-color: var(--colors-gray-700);
}
body[data-theme] .text-gray-800 {
  color: var(--colors-gray-800);
}
body[data-theme] .text-gray-900 {
  color: var(--colors-gray-900);
}
body[data-theme] .bg-gray-50 {
  background-color: var(--colors-gray-50);
}
body[data-theme] .text-green-800 {
  color: var(--colors-green-800);
}
body[data-theme] .text-green-700 {
  color: var(--colors-green-700);
}
body[data-theme] .text-green-600 {
  color: var(--colors-green-600);
}
body[data-theme] .text-green-500 {
  color: var(--colors-green-500);
}
body[data-theme] .border-green-400 {
  border-color: var(--colors-green-400);
}
body[data-theme] .bg-green-200 {
  background-color: var(--colors-green-200);
}
body[data-theme] .bg-green-100 {
  background-color: var(--colors-green-100);
}
body[data-theme] .text-yellow-800 {
  color: var(--colors-yellow-800);
}
body[data-theme] .text-yellow-500 {
  color: var(--colors-yellow-500);
}
body[data-theme] .border-yellow-500 {
  border-color: var(--colors-yellow-500);
}
body[data-theme] .border-yellow-400 {
  border-color: var(--colors-yellow-400);
}
body[data-theme] .bg-yellow-100 {
  background-color: var(--colors-yellow-100);
}
body[data-theme] .bg-yellow-50 {
  background-color: var(--colors-yellow-50);
}
body[data-theme] .bg-blue-100 {
  background-color: var(--colors-blue-100);
}
body[data-theme] .text-blue-200 {
  color: var(--colors-blue-200);
}
body[data-theme] .hover\:bg-blue-200:hover {
  background-color: var(--colors-blue-200);
}
body[data-theme] .border-blue-200 {
  border-color: var(--colors-blue-200);
}
body[data-theme] .border-blue-400 {
  border-color: var(--colors-blue-400);
}
body[data-theme] .border-blue-500 {
  border-color: var(--colors-blue-500);
}
body[data-theme] .text-blue-600 {
  color: var(--colors-blue-600);
}
body[data-theme] .text-blue-700 {
  color: var(--colors-blue-700);
}
body[data-theme] .text-blue-800 {
  color: var(--colors-blue-800);
}
body[data-theme] .bg-blue-50 {
  background-color: var(--colors-blue-50);
}
body[data-theme] .text-red-800 {
  color: var(--colors-red-800);
}
body[data-theme] .text-red-700 {
  color: var(--colors-red-700);
}
body[data-theme] .text-red-600 {
  color: var(--colors-red-600);
}
body[data-theme] .text-red-500 {
  color: var(--colors-red-500);
}
body[data-theme] .border-red-300 {
  border-color: var(--colors-red-300);
}
body[data-theme] .bg-red-100 {
  background-color: var(--colors-red-100);
}
body[data-theme] .bg-primary-light {
  background-color: var(--colors-primary-light);
}
body[data-theme] .text-primary-base {
  color: var(--colors-primary-base);
}
body[data-theme] .bg-primary-base {
  background-color: var(--colors-primary-base);
}
body[data-theme] .border-primary-base {
  border-color: var(--colors-primary-base);
}
body[data-theme] .bg-primary-dark {
  background-color: var(--colors-primary-dark);
}
body[data-theme] .text-white {
  color: var(--colors-white);
}
body[data-theme] .bg-white {
  background-color: var(--colors-white);
}

 /* Dark theme: swap the tenant logo (black bars) for the on-dark mark
     (bars #F5F7FA, as in logo-a-lockup-dark.svg). Matches the uploaded logo
     and the "Einloggen mit dashbrd.io" icon; survives a logo re-upload. */
  body[data-theme="dark"] img[src*="/static/images/logos/"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='ga-m' x1='0.45' y1='1' x2='0.55' 
  y2='0'%3E%3Cstop offset='0%25' stop-color='%233D7BFF'%3E%3C/stop%3E%3Cstop offset='55%25' stop-color='%238A5CFF'%3E%3C/stop%3E%3Cstop offset='100%25' 
  stop-color='%23F26AA8'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='6' y='34' width='12' height='24' rx='2.5' fill='%23F5F7FA'%3E%3C/rect%3E%3Crect x='22' y='22' 
  width='12' height='36' rx='2.5' fill='%23F5F7FA'%3E%3C/rect%3E%3Crect x='38' y='6' width='12' height='52' rx='2.5' fill='url(%23ga-m)'%3E%3C/rect%3E%3C/svg%3E");
  }