/* ═══════════════════════════════════════════════════════════════════════ ViLi theme — COBALT MATCHA Cobalt primary on matcha ground. Drop-in recolour for shared.css. TWO WAYS TO INSTALL (pick one): 1) Save as assets/theme-cobalt-matcha.css and add this line in every page's , AFTER the shared.css line: 2) Or paste this entire file at the very BOTTOM of assets/shared.css. To go back to pink/yellow: remove the link (or delete the block). ═══════════════════════════════════════════════════════════════════════ */ :root { /* ---- canvas ---- */ --paper: #F7FBF4; /* sage-tinted paper */ --panel: #FFFFFF; --ink: #0F1F18; /* green-black ink */ --muted: #5C6E62; --hairline: #DFEAD9; /* ---- palette (legacy names kept so every existing rule just works) ---- */ --pink: #2B5CFF; /* PRIMARY · cobalt — marquee, hero accent, underlines */ --yellow: #9FE6B8; /* SURFACE · mint — titlebars, statbar, empty shots */ --blue: #23A86F; /* SUPPORT · jade — cta banner, code chip, stat numbers */ --mint: #23A86F; /* live dots, online dot, live titlebar */ --purple: #2B5CFF; /* focus rings, stat 4 */ --success:#12915F; /* --danger stays #F5457B — pink lives on only as the error colour */ --shadow-soft: 6px 6px 0 rgba(15, 31, 24, .10); } /* ---- chip tints (hardcoded colours in shared.css, so restated here) ---- */ .chip--live { background: #E4F8EE; } .chip--demo { background: #E9EEFF; } .chip--code { background: #E2F7EF; } .chip--soon { background: #FFF4D6; } .chip--soon::before { background: #FFC93C; } /* ---- keep a few yellow pops so the page doesn't go monochrome-polite ---- */ .hero__spark { color: #FFC93C; } .titlebar__dots i:nth-child(3) { background: #FFC93C; } /* ---- recolour the inline SVG doodles in the HTML (old hex → new palette) ---- */ svg [fill="#F5457B"] { fill: #2B5CFF; } svg [stroke="#F5457B"] { stroke: #2B5CFF; } svg [fill="#2BB0ED"] { fill: #23A86F; } svg [stroke="#2BB0ED"] { stroke: #23A86F; } svg [fill="#2DD4A7"] { fill: #12915F; } svg [stroke="#2DD4A7"] { stroke: #12915F; } svg [fill="#7A5CFF"] { fill: #2B5CFF; } svg [stroke="#7A5CFF"] { stroke: #2B5CFF; }