/* ============================================================ Malhaar Music — Theme tokens (four selectable colour modes) Saffron is the default (:root). The switcher sets data-theme="sunset|marigold|dark" on the element. Components only ever reference these semantic tokens (--accent, --bg, --ink, …), never raw hex — so adding a mode is just one more block here. ============================================================ */ :root{ /* Saffron — default */ --bar1:#ef7c0f; --bar2:#f4922e; /* top-bar gradient */ --orange:#e8730c; --orange-deep:#c75e08; --orange-soft:#f59a3e; --accent:#c9912f; --bg:#fbf6ee; --surface:#ffffff; --card:#ffffff; --border:#ecdfca; --tint:#fdeeda; --ink:#2c2118; --ink-soft:#5a4a3a; --muted:#8a7763; --faint:#b0a088; --espresso:#241a12; } [data-theme="sunset"]{ --bar1:#e0531a; --bar2:#ff6f3c; --orange:#e0531a; --orange-deep:#bd3f12; --orange-soft:#ff7a4d; --accent:#c9912f; --tint:#fdeae0; } [data-theme="marigold"]{ --bar1:#f39a12; --bar2:#f7b733; --orange:#ec971f; --orange-deep:#c97e12; --orange-soft:#f7b733; --accent:#b8902f; --tint:#fdf2d8; } [data-theme="dark"]{ /* Candlelit & Gold */ --bar1:#171008; --bar2:#171008; --orange:#d4a847; --orange-deep:#b58a38; --orange-soft:#e8c97a; --accent:#e8c97a; --bg:#0d0a08; --surface:#161210; --card:#1e1815; --border:#2e2520; --tint:#241d12; --ink:#f0e8df; --ink-soft:#cdbfac; --muted:#9a8a7a; --faint:#6a5a4a; --espresso:#0a0705; } /* Dark-mode component tweaks (things tokens alone can't flip) */ [data-theme="dark"] nav{background:rgba(18,13,9,0.92);box-shadow:0 4px 20px rgba(0,0,0,0.45);border-bottom:1px solid var(--border)} [data-theme="dark"] .brand .mark{background:radial-gradient(circle at 35% 30%,#e8c97a,#b58a38);color:#1a1206} [data-theme="dark"] .nav-cta{background:linear-gradient(135deg,#e8c97a,#b58a38);color:#1a1206 !important} [data-theme="dark"] .hero h1{background:linear-gradient(135deg,#f3e0a8,#d4a847,#e8c97a,#b58a38);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} [data-theme="dark"] .btn-ghost{background:transparent;color:var(--ink);border-color:var(--border)} [data-theme="dark"] .btn-ghost:hover{border-color:var(--orange);color:var(--orange-soft)} [data-theme="dark"] .prog.online{background:linear-gradient(150deg,#241d12,#161210)} [data-theme="dark"] .prog.onsite{background:linear-gradient(150deg,#221a12,#14100c)} [data-theme="dark"] .field .inp{background:#100c09;color:var(--faint)} [data-theme="dark"] .theme-switch .ts-dark{border-color:#e8c97a}