/* =============================================================
RollingFizz — Citrus Theme
File : rfz-assets/css/rfz-theme-citrus.css
Load : after rfz-style.css in
Version : 1.0
HOW TO CREATE A NEW THEME
─────────────────────────
1. Duplicate this file → rfz-theme-[name].css
2. Change the --color-* values below to your new palette.
You can point them at existing --clr-* primitives from
rfz-style.css, or use raw hex values.
3. In of every HTML page, swap the theme :
4. No other file needs to change — all components pick up
the new values automatically via the semantic tokens.
EXAMPLE — create a "Night Bar" dark-purple theme:
─────────────────────────────────────────────────
--color-primary: #9b59b6;
--color-primary-hover: #8e44ad;
--color-accent1: #e74c3c;
--color-surface-dark: #12001a;
--color-bg: #1a0a24;
--color-bg-alt: #220d30;
… etc.
============================================================= */
:root {
/* ── Primary CTA & brand highlight ── */
--color-primary: var(--clr-brand); /* #1e7a2a — standee green */
--color-primary-hover: var(--clr-brand-h); /* #166020 */
/* ── Accent palette ── */
--color-accent1: var(--clr-lemon); /* #e8d832 — lemon yellow */
--color-accent1-bright: var(--clr-lemon2); /* #f5e840 */
--color-accent2: var(--clr-soda); /* #a8e0f0 — soda blue */
--color-accent2-mid: var(--clr-soda2); /* #c8eef8 */
--color-accent2-light: var(--clr-soda3); /* #e0f6fc */
--color-accent3: var(--clr-green); /* #70c850 — citrus green */
/* ── Backgrounds ── */
--color-bg: var(--clr-white); /* #ffffff — default page bg */
--color-bg-alt: var(--clr-off); /* #fafaf7 — alternate sections */
--color-bg-paper: var(--clr-paper); /* #f5f3ec — paper tint */
/* ── Dark surfaces ── */
--color-surface-dark: var(--clr-dark); /* #1a1a14 — dark sections */
--color-surface-mid: var(--clr-mid); /* #3a3830 */
/* ── Text ── */
--color-text: var(--clr-text); /* #2a2820 — body text */
--color-text-muted: var(--clr-muted); /* #8a8678 — subdued text */
/* ── Borders ── */
--color-border: var(--clr-border); /* #e8e4d8 */
--color-border-strong: var(--clr-border2); /* #d8d2c0 */
}