/* handl — Robinhood's neon chartreuse (#CCFF00) carried from the marketing site
   into the app.

   The neon is a dark-ground colour: 17.9:1 on black, 1.2:1 on white. So it is
   not one shared accent across both themes. The dark theme — which the app now
   opens on, matching the landing page — gets the neon itself with near-black
   ink on top. The light theme keeps the neon only where it is a *fill* with
   black ink, and paints accent *text* in a deep olive of the same hue, because
   neon type on white is unreadable. Painting one value across both themes is
   what would make the light theme's every accent label vanish. */

:root{
  /* Light-theme values. The dark block below overrides them; they are here so
     a token is never undefined if the theme attribute is missing. */
  --color-accent:#ccff00 !important;
  --color-accent-rgb:204, 255, 0 !important;
  --color-accent-muted:rgba(204, 255, 0, .85) !important;
  --color-accent-line:rgba(204, 255, 0, .45) !important;
  --color-accent-active-line:rgba(204, 255, 0, .55) !important;
  --color-accent-foreground:#0a0a0a !important;
  --color-accent-foreground-rgb:10, 10, 10 !important;
  --color-inverted-foreground:#0a0a0a !important;
  --color-inverted-body:rgba(10, 10, 10, .9) !important;
  --color-inverted-muted:rgba(10, 10, 10, .72) !important;
  --color-inverted-faint:rgba(10, 10, 10, .6) !important;
  --color-inverted-soft:rgba(10, 10, 10, .75) !important;
  --color-inverted-line:rgba(10, 10, 10, .3) !important;
  --color-inverted-hairline:rgba(10, 10, 10, .15) !important;
  --color-inverted-active-line:rgba(10, 10, 10, .75) !important;
  /* Must stay defined even though the accent picker is gone. The built CSS has
     `.slide-themed{--color-accent:var(--slide-accent,var(--color-accent))}` —
     with --slide-accent unset that fallback references --color-accent from
     inside its own declaration, which CSS treats as a cycle and voids the
     token, so every accent on a themed page fell back to plain white. As a
     flat alias for the brand neon it resolves cleanly. */
  --slide-accent:#ccff00;
}

/* DARK: black + white */
:root[data-theme="dark"]{
  --color-background:#000000 !important;
  --color-foreground:#ffffff !important;
  --color-foreground-rgb:255, 255, 255 !important;
  --color-body:#e4e4e4 !important;
  --color-muted:#a0a0a0 !important;
  --color-faint:#6e6e6e !important;
  --color-soft:rgba(255, 255, 255, .64) !important;
  --color-hairline:rgba(255, 255, 255, .12) !important;
  --color-error:#ff5a52 !important;
  color-scheme:dark !important;
  /* The neon is already a dark-ground colour, so the dark theme inherits the
     :root values untouched — #CCFF00 on #000 is 17.9:1, and near-black ink on
     an accent fill is 16.6:1. This is the theme the app opens on. */
}

/* LIGHT: white + near-black */
:root[data-theme="light"]{
  --color-background:#ffffff !important;
  --color-foreground:#0a0a0a !important;
  --color-foreground-rgb:10, 10, 10 !important;
  --color-body:#2a2a2a !important;
  --color-muted:#5a5a5a !important;
  --color-faint:#8a8a8a !important;
  --color-soft:rgba(10, 10, 10, .64) !important;
  --color-hairline:rgba(10, 10, 10, .12) !important;
  --color-error:#c81e1e !important;
  color-scheme:light !important;
}

/* body follows whichever theme's tokens are active */
html, body{ background:var(--color-background) !important; color:var(--color-foreground) !important; }

/* handl mark: artwork is ink on transparent — recolor to white on the dark theme so it stays visible. */
:root[data-theme="dark"] img[src*="handl-mark"]{ filter: invert(1); }

/* The accent-colour picker and the token-holder badge are gone: there is no
   handl token and no colour to unlock. The server sends neither `slide` nor
   `isHolder` any more and the built components' guards are pinned false, so
   nothing renders these — this is the third belt, in case a stale bundle is
   cached in someone's browser. Everything that read a holder's chosen colour
   now resolves to the one brand green (see --slide-accent above). */
.slide-accents, .slide-accent-dot, .slide-holder { display:none !important; }

/* De-duplicate the logo: hide the copy in the sticky "attached" header that slides in on scroll. */
.site-attached-header .slide-brandmark { display: none !important; }

/* --- Header lockups -------------------------------------------------------
   Marketing pages: the mark alone. The header used to stack a 22px <img> and
   the large masked brand-mark, with a wordmark beside them; now only the mark
   is shown, so the small duplicate and the text both go. The sticky header
   reuses these classes, so one set of rules covers both. */
.site-header__brand .slide-brandmark { display: none !important; }
.site-header__brand { display: inline-flex !important; align-items: center !important; gap: 0 !important; }

/* Put the "handl" span back to screen-reader-only: it stays the accessible name
   for the link while the mark carries the brand visually. */
.site-header__brand .site-header__sr-only {
  position: absolute !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden !important;
}

/* The mark is a masked element filled with currentColor, so it flips to black
   ink by itself wherever the green reveal band crosses the header. */
.site-header__brand-mark {
  width: 2.17rem !important; height: 2.17rem !important; flex: 0 0 auto !important;
}

/* App pages (dashboard / send / receive / activity): the wordmark alone. The
   markup is <a class="slide-top__brand"><img>handl</a>, so the image is hidden
   and the bare text node is collapsed with font-size:0, then the wordmark
   artwork is painted as a currentColor mask — which keeps it white on the dark
   theme and black on the light one. The box matches the artwork's
   aspect 500:153 (the glyphs plus their transparent bleed). The bleed is why the box is
   taller than the glyphs need: without it the round tops of p/a/o and the p/y
   descenders sit flush on the image edge and the browser shaves them off when
   it scales the mask down to ~16px, which reads as a cut-off wordmark. */
.slide-top__brand {
  display: inline-block !important;
  width: 3.555rem !important; height: 1.088rem !important;
  font-size: 0 !important; line-height: 0 !important;
  background-color: currentColor !important;
  -webkit-mask: url("/brand/handl-wordmark.svg?v=1") left center / contain no-repeat !important;
  mask: url("/brand/handl-wordmark.svg?v=1") left center / contain no-repeat !important;
}
.slide-top__brand .slide-brandmark { display: none !important; }

/* --- Accent as text vs accent as fill ------------------------------------
   #CCFF00 is a fill colour. On black it is 17.9:1; as text on the light theme's
   white it is 1.2:1 — unreadable. So the light theme paints accent *text* in a
   deep olive of the same hue (#5C7A00, 6.4:1 on white) while every accent fill
   — the reveal bands, buttons, coin mark, dots — stays neon with black ink on
   it. The built CSS asks for var(--color-accent-text, var(--color-accent)), so
   leaving the token undefined on the dark theme keeps that theme exactly as the
   brand intends. */
:root[data-theme="light"]{ --color-accent-text:#5c7a00 !important; }