/* Synced from brand/tokens.css — run scripts/sync-brand-tokens.sh after edits */ /* ============================================================ MYTHIC MATTERS — BRAND TOKENS Source of truth for color across all Mythic Matters properties. Load this BEFORE each site's own styles.css. Two tiers: WEB — parchment / laurel green / gold. The imprint. BOOK — ink black / antique gold. The Art of Killing Gods. The tiers meet at their darkest point: web dark mode (#171410) and the book's ink black (#130A0E) are nearly the same color. Dark mode resolves in two ways, in this order: 1. :root[data-theme="dark"] — explicit user toggle 2. prefers-color-scheme: dark — system default, unless the user has toggled to light The two dark blocks at the bottom of this file MUST stay identical. Edit one, edit the other. ============================================================ */ :root { /* ---- WEB · LIGHT ---- */ --mm-parchment: #F4F1E8; /* page background */ --mm-parchment-deep: #E9E1D2; /* section bands */ --mm-vellum: #FFFAF0; /* cards, raised surfaces, and light text sitting on a colored fill — stays near-white in BOTH themes */ --mm-ink: #2A2724; /* body text */ --mm-muted: #6C665C; /* secondary text */ --mm-laurel: #0E2A28; /* primary buttons */ --mm-laurel-light: #173C38; /* button hover */ /* Gold ladder — three steps, distinct in both themes. gold = accents, rules, links gold-deep = small text on parchment (gold alone is only 3.1:1) gold-bright = emphasis on a dark fill (hero, laurel gradient) Hue is held at 70deg across all three, and across the book bronzes below. That is deliberate: the cover artwork runs at 55-62deg, and an 80deg chrome gold sitting beside a 62deg painted gold at the same lightness reads as a misprint rather than a choice. 70deg closes the gap to dE 1.4 without warming the chrome into orange. */ --mm-gold: #B07E40; --mm-gold-deep: #825A27; --mm-gold-bright: #CF954C; /* Cool accent. Verdigris, not steel blue — hue ~170deg, the green side of teal, so it sits beside gold without going nautical. --verdigris is a highlight and is NOT safe under vellum text (2.0:1). For any surface carrying light text, use --verdigris-deep. */ --mm-verdigris: #83BDB3; /* sparing highlight */ --mm-verdigris-deep: #2E5750; /* cool fill — 7.8:1 under vellum */ --mm-verdigris-mid: #3D6F66; /* gradient partner — 5.5:1 under vellum */ /* ---- BOOK · THE ART OF KILLING GODS ---- For anything sitting beside the cover: A+ content, print, foil editions, title-specific promo. Not for site chrome. */ --aokg-ink: #130A0E; --aokg-oxblood: #251A1C; --aokg-ember: #813C22; /* one accent per piece, never more */ --aokg-ember-light: #9C4E2B; /* gradient partner for ember */ --aokg-bronze: #8D6D48; /* bronzes share the 70deg hue with --mm-gold */ --aokg-gold: #C09562; --aokg-foil: #DCB07E; --aokg-bone: #B1AEA7; /* ---- SEMANTIC (what components should reference) ---- */ --bg: var(--mm-parchment); --bg-deep: var(--mm-parchment-deep); --surface: var(--mm-vellum); --text: var(--mm-ink); --text-muted: var(--mm-muted); --accent: var(--mm-gold); --accent-strong: var(--mm-gold-deep); --accent-cool: var(--mm-verdigris); --button: var(--mm-laurel); --button-hover: var(--mm-laurel-light); --on-button: var(--mm-vellum); --border: rgba(176, 126, 64, 0.24); /* --mm-gold at 24% */ --shadow: rgba(45, 35, 24, 0.12); } /* ------------------------------------------------------------ TYPOGRAPHY — shared by all sites. ------------------------------------------------------------ */ :root { --mm-display: "Cormorant Garamond", Georgia, serif; --mm-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ============================================================ DARK — block 1 of 2: explicit toggle. Keep identical to block 2. ============================================================ */ :root[data-theme="dark"] { --mm-night: #171410; /* the bridge to the book palette */ --mm-night-deep: #0F0D0A; --mm-night-raise: #1E1B16; --mm-ink-inv: #F1E8D9; --mm-muted-inv: #C4B5A1; --mm-laurel: #0C2C29; --mm-laurel-light: #174A43; --mm-gold: #D8A568; --mm-gold-deep: #BF8D51; --mm-gold-bright: #F6C184; --mm-verdigris: #7AAEA6; --bg: var(--mm-night); --bg-deep: var(--mm-night-deep); --surface: var(--mm-night-raise); --text: var(--mm-ink-inv); --text-muted: var(--mm-muted-inv); --accent: var(--mm-gold); --accent-strong: var(--mm-gold-bright); --accent-cool: var(--mm-verdigris); --button: var(--mm-gold); --button-hover: var(--mm-gold-bright); --on-button: var(--mm-night); --border: rgba(210, 185, 142, 0.16); --shadow: rgba(0, 0, 0, 0.42); } /* ============================================================ DARK — block 2 of 2: system preference, unless toggled to light. Keep identical to block 1. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mm-night: #171410; --mm-night-deep: #0F0D0A; --mm-night-raise: #1E1B16; --mm-ink-inv: #F1E8D9; --mm-muted-inv: #C4B5A1; --mm-laurel: #0C2C29; --mm-laurel-light: #174A43; --mm-gold: #D8A568; --mm-gold-deep: #BF8D51; --mm-gold-bright: #F6C184; --mm-verdigris: #7AAEA6; --bg: var(--mm-night); --bg-deep: var(--mm-night-deep); --surface: var(--mm-night-raise); --text: var(--mm-ink-inv); --text-muted: var(--mm-muted-inv); --accent: var(--mm-gold); --accent-strong: var(--mm-gold-bright); --accent-cool: var(--mm-verdigris); --button: var(--mm-gold); --button-hover: var(--mm-gold-bright); --on-button: var(--mm-night); --border: rgba(210, 185, 142, 0.16); --shadow: rgba(0, 0, 0, 0.42); } }