Hover

The brand rule for hover is one sentence: any hover, halo, or accent border uses the closest non-neutral color in its ancestor chain. White, black, and grey are reserved for the explicit opt-out (.tone-neutral). They're never the default.

The mechanism is a single cascading RGB triplet, --btn-glow. Every brand-tinted ancestor sets it; every hover treatment in the system consumes it. Default at :root is the marketing peach (255, 170, 120), so even a hover on a chromeless surface picks up a warm wash rather than dead grey.

How to set tone on a container

Class family	Background	Sets tone	Use when
`.bloom-*`	yes (radial gradient)	yes	section background — the visible color is the point
`.tone-*`	no	yes	tone-only — neighboring elements inherit the accent without the row being painted
`.glow-*`	no	yes	legacy alias of `.tone-`; prefer `.tone-` in new code

Tones available: peach, amber, lavender, sage, blue, pink, lime. Plus tone-neutral to force a grey wash.

How to consume tone in a hover

Every hover treatment reads --btn-glow (or one of its derived tokens) so the cascade resolves at hover time:

Token	Resolves to	Use
`--btn-glow`	RGB triplet, e.g. `230, 180, 90`	base accent — feed into `rgba(var(--btn-glow), α)` for halos, borders, rings
`--btn-glow-soft`	softer triplet for highlights	gradients, secondary halos
`--tone-hover`	`rgba(var(--btn-glow), 0.10)`	subtle hover background wash on neutral surfaces (ghost, outline)
`--tone-hover-strong`	`rgba(var(--btn-glow), 0.18)`	stronger hover on dense or busy surfaces

Authoring a new hover state? Reach for --tone-hover first. Reach for hardcoded greys (rgba(0,0,0,0.04), var(--ink-hover)) only when the surface is intentionally chromeless — and document the reason inline.

Recipe

/* The default hover for any neutral surface. */
.my-thing:hover {
  background: var(--tone-hover);
}

/* A tone-tinted halo on an interactive primitive. */
.my-card:hover {
  box-shadow: 0 0 0 1px rgba(var(--btn-glow), 0.35);
}

/* Force a neutral wash on a dense surface — opt-out. */
.dense-menu {
  --btn-glow: 13, 13, 13; /* or apply class .tone-neutral on a parent */
}

Override and opt-out

Local override — set --btn-glow: R, G, B; and --btn-glow-soft: R, G, B; on any parent. The cascade flows down from there.
Force neutral — apply .tone-neutral to a parent. Hovers underneath collapse to a grey wash. Use only when the surface is intentionally chromeless (dense data tables, system menus).
Per-component override — set --btn-glow directly on the interactive element's selector. Highest specificity wins.

What this is not

Not a focus-ring policy. The peach --focus-ring is the canonical keyboard ring across the entire system (see Focus). Tone cascade governs hover, not focus.
Not a license to flat-fill brand colors. Color still shows up as bloom moments and tone-tinted hovers — never as solid accent borders, tinted text, or chip backgrounds outside the bloom palette.