/* ============================================================================ hs-theme.css — THE single palette source for every Hook Street surface. ---------------------------------------------------------------------------- The brief named the disease: Chanie=warm, Mildred=slate, briefings=navy-gold drifted because each page hand-edited its own colors. Here they CONVERGE: one token sheet, scoped per audience by . Set the skin once (HS.skin('chanie') or hard-code data-skin in the page ); the tokens flow through every component that reads var(--bg), var(--ink), var(--accent), etc. To re-skin a page: change its data-skin, NOT its colors. To tune a palette for everyone on that skin: edit it HERE, once. That is the propagation rule. Components should consume these vars (not literal hex): --bg page background --card card/tile surface --ink primary text --muted secondary text --line hairline borders --head hero/header background --accent primary action/brand --accent-soft tinted accent fill --good #10b981 --warn #f59e0b --bad #ef4444 (shared status colors) ============================================================================ */ :root { /* shared status colors — identical on every skin */ --good: #10b981; --warn: #f59e0b; --bad: #ef4444; } /* OPT-IN by design: a page is only themed once it sets . Pages with no data-skin (e.g. home.html today) keep their own styles untouched — adopt deliberately during a re-skin, never as an accidental side effect. */ /* ---- SAM · home base — navy + gold (the default door) --------------------- */ body[data-skin="sam"] { --bg: #f3f1ea; --card: #ffffff; --ink: #1a2230; --muted: #6b7787; --line: #e3ddcf; --head: #0f2440; --accent: #b88a2e; --accent-soft: #f6ecd4; } /* ---- CHANIE · family OS — warm cream / sand / muted olive (coffee-shop) ---- */ body[data-skin="chanie"] { --bg: #f3ece0; --card: #fffdf8; --ink: #3a3430; --muted: #8a7f72; --line: #e6dccb; --head: #5b5347; --accent: #7c7a52; --accent-soft: #ece7d6; } /* ---- MILDRED · ops board — soft harbor blue / slate (business-only) -------- */ body[data-skin="mildred"] { --bg: #eef2f6; --card: #ffffff; --ink: #1f2a37; --muted: #5b6b7c; --line: #d8e0e8; --head: #2b4a63; --accent: #2f6f9c; --accent-soft: #dce8f1; } /* ---- BRIEFINGS · reports — navy + gold, slightly richer ------------------- */ body[data-skin="briefings"] { --bg: #f6f1e7; --card: #fffdf8; --ink: #1a2230; --muted: #6b7787; --line: #e4ddcf; --head: #173a5e; --accent: #b88a2e; --accent-soft: #efe7d4; }