/* Shared base for every page on deadsimpledigital.com. Tokens are the Adobe Room as RE-WEIGHTED 2026-08-05, per GL-003 section 2. Source of truth: team-knowledge/Guidelines/GL-003-design-system.md The re-weight is the point. The palette did not change, the roles did. Deep Navy used to carry the ground, so every surface read blue, which Just named directly: "the blues and indigos are just not me." Ground is now warm near-black, Marigold is promoted from badge to primary accent, Bone stays as text, Navy demotes to an occasional accent, and Foxfire is reserved for the Quiet Host's candle-flame eyes so the Muertos story survives. TWO MODES. Dark is the default. Light follows prefers-color-scheme, and either can be forced with [data-theme="light"] or [data-theme="dark"] on , which is what the toggle sets. Marigold at #E8960A is about 2.4:1 on warm paper and FAILS as text there, so light mode carries a darkened accent for anything that must be read. Page style blocks derive from these. Do not hardcode a hex in a page. */ :root { color-scheme: dark; --bg: #14120D; /* Obsidian. Warm near-black, brown-biased. */ --panel: #1F1B14; /* Ember Shadow. Panels and cards. */ --panel-2: #2A241A; /* raised: inputs, hover rows. */ --line: #3A3227; /* warm divider. Decorative only, 1.5:1. */ --ink: #F2E6C9; /* Bone. 15.1:1 on the ground. */ --muted: #9C8F76; /* warm secondary text, 5.9:1. Also control edges. */ --accent: #E8960A; /* True Marigold. Primary accent, 7.8:1. */ --accent-soft: #33240A; /* deep marigold wash. */ --gold: #C9A84C; /* Antique Gold. Badges and rules, 8.2:1. */ --send: #C8A882; /* Adobe Sand. */ --radius: 10px; --shadow: 0 1px 4px rgba(0,0,0,.55); } /* Declared twice on purpose: once for the system preference, once for an explicit [data-theme="light"]. A media query cannot be folded into a selector list, and duplicating ten declarations beats a runtime dependency. Keep the two blocks identical. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #F7F4EF; /* Warm Paper. The inversion of Obsidian. */ --panel: #FFFFFF; --panel-2: #EFEAE0; --line: #DCD3C4; --ink: #1F1B14; /* 15.6:1 */ --muted: #6B6152; /* 5.5:1 */ --accent: #8A5606; /* darkened Marigold, 5.6:1, AA for text */ --accent-soft: #F6E7C8; --gold: #756017; /* darkened Antique Gold, 5.6:1 */ --shadow: 0 1px 4px rgba(31,27,20,.12); } } :root[data-theme="light"] { color-scheme: light; --bg: #F7F4EF; --panel: #FFFFFF; --panel-2: #EFEAE0; --line: #DCD3C4; --ink: #1F1B14; --muted: #6B6152; --accent: #8A5606; --accent-soft: #F6E7C8; --gold: #756017; --shadow: 0 1px 4px rgba(31,27,20,.12); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } .wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; } a { color: var(--accent); } a:hover { color: var(--ink); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* Site bar. Wordmark left, theme toggle right. */ .sitebar { border-bottom: 1px solid var(--line); } .sitebar .wrap { display: flex; align-items: center; gap: 16px; height: 52px; } .mark { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-decoration: none; font-weight: 700; white-space: nowrap; } a.mark:hover { color: var(--accent); } .theme-toggle { margin-left: auto; font: inherit; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; background: none; color: var(--muted); border: 1px solid var(--muted); border-radius: 4px; padding: 5px 12px; cursor: pointer; line-height: 1.4; } .theme-toggle:hover { color: var(--ink); border-color: var(--accent); } .rule { border: 0; border-top: 1px solid var(--line); margin: 0; } section { padding: 46px 0; } h2 { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; } p { max-width: 62ch; } .dim { color: var(--muted); } footer.site { padding: 40px 0 64px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); margin-top: 20px; } footer.site a { color: var(--muted); } footer.site a:hover { color: var(--accent); }