/* Monochrome dark theme override — replaces the colorful brand palette
   with a neutral slate/graphite scheme for a more professional look. */

:root, .dark {
  --brand: oklch(72% .008 260) !important;
  --highlight: oklch(52% .006 260) !important;
  --background: oklch(10% .003 260) !important;
  --card: oklch(17% .004 260) !important;
  --surface: oklch(16% .004 260) !important;
  --surface-elevated: oklch(20% .004 260) !important;
  --foreground: oklch(94% .002 260) !important;
  --muted: oklch(23% .005 260) !important;
  --muted-foreground: oklch(62% .006 260) !important;
  --border: oklch(100% 0 0 / .07) !important;
}

body {
  background: var(--background);
}

/* Neutralize every per-item accent hue (icon tiles, category blobs,
   hero glows, timeline dots, badge chips) baked in as inline oklch() */
[style*="oklch"] {
  background: linear-gradient(135deg, oklch(30% .006 260), oklch(18% .006 260)) !important;
  box-shadow: 0 0 8px oklch(45% .006 260) !important;
}

/* Badge/tag chips (small translucent pills) read better as flat
   translucent white rather than solid grey */
span[style*="oklch"][style*="/ 0.18"],
span[style*="oklch"][style*="/.18"] {
  background: oklch(100% 0 0 / 0.07) !important;
  box-shadow: none !important;
  color: var(--foreground) !important;
}

/* Gradient headline text — silver sheen instead of blue/purple */
.text-gradient-brand {
  background-image: linear-gradient(135deg, oklch(98% 0 0), oklch(78% .005 260) 45%, oklch(60% .006 260)) !important;
}

/* Grid overlay dots stay neutral (already low-alpha white, fine as-is) */

/* Status / accent utility colors -> grey scale */
.text-emerald-400,
.text-rose-400,
.text-rose-300 {
  color: var(--muted-foreground) !important;
}
.bg-emerald-400 {
  background-color: oklch(70% .006 260) !important;
  box-shadow: none !important;
}
.shadow-emerald-400\/60 {
  --tw-shadow-color: oklch(70% .006 260 / .5) !important;
}
.bg-rose-500,
.bg-rose-500\/10,
.bg-rose-500\/15 {
  background-color: oklch(28% .006 260) !important;
}
.hover\:bg-rose-500:hover,
.hover\:bg-rose-500\/15:hover {
  background-color: oklch(32% .006 260) !important;
}
.border-rose-400,
.border-rose-400\/20 {
  border-color: oklch(100% 0 0 / .12) !important;
}
.bg-yellow-400\/70,
.bg-red-400\/70 {
  background-color: oklch(55% .006 260 / .7) !important;
}

/* Download / primary buttons: swap the blue-to-purple gradient for a
   clean graphite gradient, keep the same shape/spacing */
.bg-gradient-to-r.from-\[var\(--brand\)\].to-\[var\(--highlight\)\],
.bg-gradient-to-br.from-\[var\(--brand\)\].to-\[var\(--highlight\)\] {
  background-image: linear-gradient(to right, oklch(78% .006 260), oklch(58% .006 260)) !important;
}