/* ──────────────────────────────────────────────────────────────
   Robinhood Chain recolor layer
   loaded after dist/main.css — overrides only colour, no layout
   ────────────────────────────────────────────────────────────── */

:root {
  --rh-green: #C9EC09;
  --rh-green-deep: #B6D907;
  --rh-green-dim: #8FAE06;
  --rh-black: #000000;

  /* original brand accent (coral) → Robinhood lime */
  --f-color-coral: #C9EC09;
  --swiper-theme-color: #C9EC09;
}

/* ── base surfaces → white ────────────────────────────────────
   The original theme is black. Repaint the page ground white so the
   art reads as green-on-white instead of green-on-black. */
html, body,
.f-sys-container, .f-c-scroll-container, .f-main {
  background: #FFFFFF !important;
}

/* ── the art layer ────────────────────────────────────────────
   Every WebGL background, lottie canvas and raster image is
   remapped onto a single green ramp. The filter sits on the
   PARENT so the inline blur() the site sets on its background
   canvases survives untouched.
   Order matters: invert FIRST so the art reads for a light page, then
   colourise. Colourising last means no tone can end up neutral grey, which
   is what produced the muddy dark-olive patches. Opacity lets the white
   page lift the shadows instead of contrast, which would grey them out. */
/* Containers whose canvas we replaced with our own SVG must NOT be filtered —
   the diagram is already drawn in brand colours, and a CSS filter applies to
   every descendant, so it would invert the artwork we just authored. */
:has(> canvas):not(:has(.verity-diagram)),
img {
  filter: invert(1) grayscale(1) brightness(1.15) contrast(0.95)
          sepia(1) hue-rotate(25.5deg) saturate(10);
  opacity: .70;
}

/* the header logo is emissive-white → make it dark on the white ground */
img[src*="logo-fx"] {
  filter: grayscale(1) brightness(0.15);
}

/* ── text → dark on white ─────────────────────────────────────── */
.f-s-content-wrapper,
.f-s-content-wrapper * {
  color: #0B0B0B !important;
}
.f-s-content-wrapper a { color: #1A1A1A !important; }

/* ── accents ─────────────────────────────────────────────────── */
.f-color-coral,
.text-coral {
  color: var(--rh-green) !important;
}

/* nav: active item picks up the green */
.f-s-content-wrapper a:hover,
nav a:hover {
  color: var(--rh-green);
}

/* hero CTA sits ON the green field — keep it glass, just green the edge */
.f-c-button-1,
.f-c-button-2 {
  border-color: rgba(201, 236, 9, 0.55) !important;
  box-shadow: 0 0 24px rgba(201, 236, 9, 0.28);
}

/* sticky bottom-bar CTA (#3D3D3D by default) sits on near-black —
   a solid Robinhood pill reads best here */
.f-c-button-3 {
  background-image: none !important;
  background-color: var(--rh-green) !important;
  border-color: var(--rh-green) !important;
  box-shadow: 0 0 32px rgba(201, 236, 9, 0.45);
}
.f-c-button-3,
.f-c-button-3 * {
  color: #000 !important;
}

/* bottom bar tint was rgba(255,0,0,.1) — a warm cast under the green art */
.f-s-bottom-bar {
  background-color: rgba(201, 236, 9, 0.08) !important;
}

/* selection + focus */
::selection {
  background: var(--rh-green);
  color: #000;
}