/**
 * Design tokens — Glass
 *
 * A single glass-surface token, restricted to the contexts EC-DESIGN.md
 * names: navigation, modals, floating panels, winner overlays, and
 * (added for Countdown's frosted tiles, second material enrichment
 * pass) countdown tiles. Not a general-purpose utility — most surfaces
 * use --ec-color-surface, not this.
 *
 * The Competition Card's Draw Badge (EC-ARCHITECTURE.md, Design Locks
 * — Competition Card) is a sixth eligible context, added because the
 * locked specification explicitly requires each draw type read as its
 * material's calmest expression rather than a solid fill — the same
 * reasoning Countdown's tiles already established. competition-card.css
 * consumes the base/[data-material='water']/[data-material='fire']
 * variants unmodified; no new variant was added for this.
 *
 * EC-DESIGN.md's Glass list also names the Competitions Page's filter
 * chips (active state) as an eligible context — that's the same glass
 * *technique* (translucency, blur, highlight), but tuned with its own
 * page-local values (competitions-filters.css) rather than this
 * token's own, since this token's specific values are tuned for a much
 * larger Countdown tile and read as washed-out at chip scale. Not a
 * consumer of --ec-glass-surface/-blur/-border itself.
 *
 * Glass is a structural technique, not a material of its own
 * (EC-DESIGN.md, Glass) — this token exists independently of
 * Water/Fire/Neutral, for any component that's one of the four
 * eligible contexts.
 *
 * Documented in EC-DESIGN-SYSTEM.md's Foundations layer but not built
 * during the original token-layer pass (out of that stage's explicit
 * scope). Built now because Nav is the first component that actually
 * needs it.
 */

:root {
	--ec-glass-surface: rgba(255, 255, 255, 0.72);
	--ec-glass-blur: 12px;
	--ec-glass-border: rgba(255, 255, 255, 0.4);
}

@media (prefers-color-scheme: dark) {
	:root {
		--ec-glass-surface: rgba(15, 23, 42, 0.72);
		--ec-glass-border: rgba(255, 255, 255, 0.08);
	}
}

/**
 * Water-tinted variant. Consumed by Countdown so a Water-mood tile
 * reads as "looking through water" rather than the same achromatic
 * frost used everywhere else.
 *
 * Third pass (greyscale test): the border is now a genuinely bright,
 * crisp edge (0.7, versus Fire's soft below) and the blur is deeper
 * (18px) — Water reflects, so its edge should look cut and catch
 * light sharply, more like a physical pane than a soft haze.
 *
 * Fifth pass: retuned to the new tropical turquoise palette (was a
 * plain pale blue) and made more translucent (0.6 → 0.42 surface
 * alpha) — a frosted crystal tile should let more of what's behind it
 * through, not read as a solid pastel-tinted box.
 */
[data-material='water'] {
	--ec-glass-surface: rgba(217, 251, 250, 0.42);
	--ec-glass-blur: 18px;
	--ec-glass-border: rgba(255, 255, 255, 0.7);
}

@media (prefers-color-scheme: dark) {
	[data-material='water'] {
		--ec-glass-surface: rgba(15, 55, 60, 0.5);
		--ec-glass-border: rgba(255, 255, 255, 0.24);
	}
}

/**
 * Fire-tinted variant. Originally judged unnecessary — Fire's
 * glass-like quality ("warm forged glass", EC-DESIGN.md) was assumed
 * to come entirely from its own gradient/glow richness. Countdown's
 * draw-reveal mood needed an actual frosted tile, same as Water's, so
 * this now exists too.
 *
 * Third pass: deliberately the opposite edge treatment from Water — a
 * softer, warmer, lower-contrast border (0.4, not 0.85) and shallower
 * blur (14px, not 18px). Fire is illuminated, not reflective; its edge
 * should look like light bleeding through, not a hard, catching rim.
 *
 * Sixth pass: more translucent (0.58 → 0.46) — "a translucent surface
 * with warmth beneath it," matching Water's move in the same direction
 * last pass.
 */
[data-material='fire'] {
	--ec-glass-surface: rgba(255, 224, 196, 0.46);
	--ec-glass-blur: 14px;
	--ec-glass-border: rgba(255, 214, 168, 0.4);
}

@media (prefers-color-scheme: dark) {
	[data-material='fire'] {
		--ec-glass-surface: rgba(74, 42, 22, 0.6);
		--ec-glass-border: rgba(255, 180, 120, 0.22);
	}
}
