/* Warm Editorial — design tokens Light is the default. Dark is opted into with [data-theme="dark"] on . Never write a raw hex outside this file. */ :root { /* Surfaces — every neutral leans warm. No pure white, no cold grey. */ --bg: #EDE8DF; --bg2: #F6F3ED; --bg3: #E4DED2; --border: #DAD3C6; --border2: #C6BDAC; /* Text */ --text: #22201D; --text2: #5C574F; --text3: #8C857A; /* Bronze — the only accent that speaks */ --accent: #A38A6A; --accent-h: #8D7352; --accent-text: #7D6644; /* darkened for TEXT — see note */ --accent-s: rgba(163,138,106,.12); --accent-b: rgba(163,138,106,.30); --on-accent: #FFFFFF; /* Sage — the quiet second voice, for status and small marks only */ --sage: #7C8A76; --sage-s: rgba(124,138,118,.12); /* Inverted chapter — light mode flips cream to warm black */ --invert-bg: #151210; --invert-bg2: #1E1A17; --invert-bg3: #262119; --invert-border: #2E2822; --invert-border2: #40382F; --invert-text: #EDE7DD; --invert-text2: #A79E92; --invert-text3: #8A8177; /* Shape — corners are large and soft. Nothing is sharp. */ --radius: 28px; --radius-lg: 24px; --radius-md: 16px; --radius-sm: 12px; --radius-pill: 999px; /* Depth — barely there. Wide and soft, never a hard drop shadow. */ --shadow-sm: 0 1px 2px rgba(34,32,29,.05); --shadow-md: 0 18px 48px -24px rgba(34,32,29,.22); /* Type */ --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --ease: cubic-bezier(.22,.61,.36,1); } [data-theme="dark"] { --bg: #151210; --bg2: #1E1A17; --bg3: #262119; --border: #2E2822; --border2: #40382F; --text: #EDE7DD; --text2: #A79E92; --text3: #8A8177; --accent: #B39B7C; --accent-h: #C4AE91; --accent-text: #C0A888; --accent-s: rgba(179,155,124,.13); --accent-b: rgba(179,155,124,.28); --on-accent: #1B1613; /* NOT white — see note */ --sage: #93A08C; --sage-s: rgba(147,160,140,.13); /* In dark mode an inverted chapter does not jump to cream — it lifts. A cream band mid-way down a dark page destroys reading. */ --invert-bg: #1E1A17; --invert-bg2: #262119; --invert-bg3: #2E2822; --invert-border: #40382F; --invert-border2: #4E4438; --invert-text: #EDE7DD; --invert-text2: #A79E92; --invert-text3: #8A8177; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 18px 48px -24px rgba(0,0,0,.7); } /* Two contrast traps this file exists to prevent: 1. --on-accent is #1B1613 in dark mode, not white. Bronze is light enough there that white text on it fails AA. 2. --accent is a FILL colour. For small text use --accent-text, which is darkened (light) / lightened (dark) to clear AA. */