/* ============================================================
   Monochrome theme override — gray tones instead of sky-blue.
   Loaded AFTER the compiled CSS so these win. Delete the
   <link> to override.css in index.html to restore the blue.
   ============================================================ */

/* 1. Recolor the sky gradient variables -> neutral gray ramp.
      This repaints the whole-page body gradient automatically
      (light at top, dark at bottom), mirroring the original. */
:root {
  --sky-top:   #45494d;
  --sky-mid:   #33363a;
  --sky-deep:  #232629;
  --sky-close: #141516;
}

/* 2. Desaturate all raster/vector imagery (the photographic sky
      background, exchange logos, social icons) to grayscale.
      Applied to <img> only, so it never affects the fixed nav. */
img {
  filter: grayscale(1) !important;
}
/* darken just the photographic sky backgrounds so the hero matches the
   darker gradient (logos/icons keep plain grayscale, above). */
img.object-cover {
  filter: grayscale(1) brightness(0.5) !important;
}

/* 3. Blue button/link text (#1A4C72) -> dark gray.
      Use ~= (exact class token) NOT *= (substring) so this matches the base
      utility `text-[#1A4C72]` only — never the state variant
      `hover:text-[#1A4C72]` (which would grey out the nav button at rest). */
[class~="text-[#1A4C72]"],
[class~="text-[#1a4c72]"] {
  color: #3a3f44 !important;
}

/* 4. Neutralize the green/red market accents -> monochrome grays.
      Keep a light/dark split so up vs down is still legible. */
[style*="#7BE38C"] { background-color: #c2c7cc !important; }   /* live dots  */
[class*="text-[#7BE38C]"] { color: #cdd2d7 !important; }       /* + change   */
[class*="text-[#F98C8C]"] { color: #979ca1 !important; }       /* - change   */