/* ============================================================ BEEST ENERGY — SHARED COLOUR THEMES Each theme defines the same token contract so any design can consume them. Switch by setting . Priority: black + gold (matches the product). Plus a range of tones tuned for the African market. ============================================================ */ :root { /* fallback = premium gold */ --bg: #0c0a07; --bg-2: #14110b; --surface: #1a160e; --text: #f6edd6; --text-muted:#b8a988; --accent: #d4af37; --accent-2: #b8860b; --accent-3: #f0d878; --on-accent: #100c04; --line: rgba(212,175,55,.18); --glow: rgba(212,175,55,.30); color-scheme: dark; } /* ---------- BLACK & GOLD FAMILY (matches the can) ---------- */ [data-theme="premium-gold"] { --bg:#0c0a07; --bg-2:#14110b; --surface:#1a160e; --text:#f6edd6; --text-muted:#b8a988; --accent:#d4af37; --accent-2:#b8860b; --accent-3:#f0d878; --on-accent:#100c04; --line:rgba(212,175,55,.18); --glow:rgba(212,175,55,.30); color-scheme: dark; } [data-theme="obsidian"] { --bg:#080808; --bg-2:#101012; --surface:#16161a; --text:#f3f1ea; --text-muted:#a7a39a; --accent:#e8d9a8; --accent-2:#c9b06a; --accent-3:#fbf3d6; --on-accent:#0a0a0a; --line:rgba(232,217,168,.16); --glow:rgba(232,217,168,.22); color-scheme: dark; } [data-theme="noir-bronze"] { --bg:#0d0907; --bg-2:#16100b; --surface:#1d150e; --text:#f4e7d8; --text-muted:#bca288; --accent:#cd7f32; --accent-2:#9a5b22; --accent-3:#e8a45c; --on-accent:#160d06; --line:rgba(205,127,50,.20); --glow:rgba(205,127,50,.30); color-scheme: dark; } /* ---------- AFRICAN MARKET TONES ---------- */ /* African sunset — charcoal + orange/red */ [data-theme="sunset"] { --bg:#160c08; --bg-2:#20100a; --surface:#2a140c; --text:#fdeede; --text-muted:#d3a78c; --accent:#ff7a18; --accent-2:#e23b2e; --accent-3:#ffb24d; --on-accent:#1a0a04; --line:rgba(255,122,24,.22); --glow:rgba(226,59,46,.32); color-scheme: dark; } /* Savanna — earth brown, ochre, olive */ [data-theme="savanna"] { --bg:#14110b; --bg-2:#1d1810; --surface:#262017; --text:#f3e9d6; --text-muted:#b6a684; --accent:#c89b3c; --accent-2:#8a7f3f; --accent-3:#e0c478; --on-accent:#161208; --line:rgba(200,155,60,.20); --glow:rgba(138,127,63,.28); color-scheme: dark; } /* Kente — Pan-African black + gold + green + red */ [data-theme="kente"] { --bg:#0a0a0a; --bg-2:#121110; --surface:#191816; --text:#f7f0dd; --text-muted:#b3ac96; --accent:#f5c518; --accent-2:#1eb053; --accent-3:#e23b2e; --on-accent:#0a0a0a; --line:rgba(245,197,24,.20); --glow:rgba(30,176,83,.28); color-scheme: dark; } /* Emerald royal — deep green + gold */ [data-theme="emerald"] { --bg:#06120d; --bg-2:#0b1c14; --surface:#10271c; --text:#eef6ec; --text-muted:#9bbcaa; --accent:#d4af37; --accent-2:#1f9d6b; --accent-3:#f0d878; --on-accent:#06120d; --line:rgba(212,175,55,.20); --glow:rgba(31,157,107,.30); color-scheme: dark; } /* Sahara — warm terracotta / sand, darker */ [data-theme="sahara"] { --bg:#1a0f0a; --bg-2:#26160e; --surface:#321d12; --text:#fbe9d6; --text-muted:#cda489; --accent:#e0853b; --accent-2:#b8472d; --accent-3:#f2b673; --on-accent:#1a0f0a; --line:rgba(224,133,59,.22); --glow:rgba(184,71,45,.30); color-scheme: dark; } /* Ivory — light premium (cream + gold + black text) */ [data-theme="ivory"] { --bg:#f4eee0; --bg-2:#fbf7ec; --surface:#ffffff; --text:#1a160e; --text-muted:#6b5d43; --accent:#b8860b; --accent-2:#caa64a; --accent-3:#8a6508; --on-accent:#fbf7ec; --line:rgba(26,22,14,.12); --glow:rgba(184,134,11,.22); color-scheme: light; }