/* ========================================================================== * THEME ACCENTS — per-theme button accent colours. * * The accent is set with an attribute on : data-accent="gold" | "green". * No attribute (or data-accent="default") = each theme's built-in look. * * Buttons don't hard-code colours anymore — they read the CSS variables below * and fall back to the theme default when no accent is active: * - Universe (dark, translucent chip): --rg-accent-from / --rg-accent-to / * --rg-accent-solid / --rg-accent-text (RGB triplets so alpha can vary) * - Earth Sky (light, solid fill): --es-accent-solid / --es-accent-solid-hover * * Keep the palette small and curated — three options per theme, all chosen to * sit nicely on that theme's surface. * ========================================================================== */ /* -------------------------------------------------------------------------- * UNIVERSE (default theme) — accents read by the translucent chip buttons. * Default (no attribute) stays the blue -> violet "nebula" look. * -------------------------------------------------------------------------- */ html[data-accent="gold"] { --rg-accent-from: 232, 184, 95; --rg-accent-to: 201, 146, 58; --rg-accent-solid: 224, 170, 86; --rg-accent-text: #fff3da; } html[data-accent="green"] { --rg-accent-from: 86, 222, 140; --rg-accent-to: 34, 197, 110; --rg-accent-solid: 52, 205, 130; --rg-accent-text: #e4ffec; } /* -------------------------------------------------------------------------- * EARTH SKY — solid buttons. Use slightly deeper shades so they stay legible * on the light surface. Default (no attribute) stays the #007bff sky blue. * -------------------------------------------------------------------------- */ html.theme-earth-sky[data-accent="gold"] { --es-accent-solid: 202, 138, 4; --es-accent-solid-hover: 161, 98, 7; } html.theme-earth-sky[data-accent="green"] { --es-accent-solid: 22, 163, 74; --es-accent-solid-hover: 21, 128, 61; }