/* ============================================================ THEME TOKENS — switchable brand palettes Main = NAVY (default). Change via . Every design consumes these vars, so the color switcher re-skins ALL designs at once. Never hardcode brand hex in a design's CSS — always use var(--brand) / var(--accent) etc. ============================================================ */ :root, :root[data-theme="navy"] { --brand: #16263f; /* main brand */ --brand-2: #22385c; /* lighter brand */ --brand-3: #2c456b; /* lighter still */ --brand-ink: #0d1826; /* darkest brand, near-black */ --brand-soft: #eaeef5; /* pale tint for section backgrounds */ --brand-line: #cdd6e2; /* faint brand-tinted border */ --accent: #b9985a; /* gold */ --accent-2: #d8bd86; /* light gold */ --accent-soft: #f3ecdd; /* pale gold wash */ --on-brand: #ffffff; /* text on brand fills */ /* neutral surfaces (kept stable-ish across palettes) */ --page-bg: #ffffff; --surface: #f5f6f8; --surface-2: #eceff3; --text: #1b2230; --text-soft: #4a525f; --line: #e3e6ea; } :root[data-theme="teal"] { --brand: #0e4f4a; --brand-2: #14655e; --brand-3: #1c7a71; --brand-ink: #08302c; --brand-soft: #e5f0ee; --brand-line: #bcd8d3; --accent: #cf9f4e; --accent-2: #e6c27f; --accent-soft: #f5ecd9; --on-brand: #ffffff; --page-bg: #ffffff; --surface: #f4f7f6; --surface-2: #e9f1ef; --text: #16221f; --text-soft: #46554f; --line: #e2e8e6; } :root[data-theme="wine"] { --brand: #5c2130; --brand-2: #74293c; --brand-3: #8c3448; --brand-ink: #3d1420; --brand-soft: #f2e7ea; --brand-line: #ddc4cb; --accent: #c79a55; --accent-2: #e0bd82; --accent-soft: #f5ecdd; --on-brand: #ffffff; --page-bg: #ffffff; --surface: #f7f4f4; --surface-2: #f1e8ea; --text: #2a1c20; --text-soft: #574349; --line: #ebe2e3; } :root[data-theme="forest"] { --brand: #1f3d2c; --brand-2: #2a5138; --brand-3: #366647; --brand-ink: #132719; --brand-soft: #e7efe9; --brand-line: #c4d6c9; --accent: #b8985a; --accent-2: #d4bb85; --accent-soft: #f1ecdd; --on-brand: #ffffff; --page-bg: #ffffff; --surface: #f4f7f4; --surface-2: #e9f1ec; --text: #182219; --text-soft: #45544a; --line: #e2e8e3; } :root[data-theme="slate"] { --brand: #2b3440; --brand-2: #3a4757; --brand-3: #4a5a6d; --brand-ink: #1a212a; --brand-soft: #eceff3; --brand-line: #cbd3dc; --accent: #5f8bbf; --accent-2: #96b6d8; --accent-soft: #e7eef6; --on-brand: #ffffff; --page-bg: #ffffff; --surface: #f4f6f8; --surface-2: #e9edf1; --text: #1c2530; --text-soft: #4a5462; --line: #e3e6ea; } :root[data-theme="indigo"] { --brand: #232a5c; --brand-2: #313a76; --brand-3: #414c93; --brand-ink: #161a3c; --brand-soft: #e9eaf4; --brand-line: #c8cce2; --accent: #cbb26a; --accent-2: #e2cf94; --accent-soft: #f3eeda; --on-brand: #ffffff; --page-bg: #ffffff; --surface: #f5f6fa; --surface-2: #eceef7; --text: #1c2033; --text-soft: #474d63; --line: #e4e5ee; } :root[data-theme="green"] { --brand: #4f8a2e; /* fresh grass green — momiki feel */ --brand-2: #63a23e; --brand-3: #7cb64f; --brand-ink: #2c5417; --brand-soft: #eaf3e1; --brand-line: #cfe3bd; --accent: #d99a2b; /* warm amber accent */ --accent-2: #ecc06a; --accent-soft: #f6edd6; --on-brand: #ffffff; --page-bg: #ffffff; --surface: #f4f8ef; --surface-2: #eaf1e1; --text: #23301c; --text-soft: #4c5a43; --line: #e4ebdd; } /* ---- legacy aliases so the original A/B/C designs re-skin too ---- */ :root { --navy: var(--brand); --navy-2: var(--brand-2); --gold: var(--accent); }