/* =========================================================================== Quill — Dark mode --------------------------------------------------------------------------- The sketchbook, closed at dusk and opened again under a desk lamp. Grounds become DARK WALNUT — deep, warm, low-chroma browns, like oiled wood and aged leather — and the sepia ink inverts to a warm CREAM that sits on the wood the way chalk or gouache would. No pure black, no pure white, no cold greys: the warmth of the light theme is preserved, just turned down for the evening. The botanical pigments are LIFTED — brightened and very slightly desaturated — so terracotta, moss, indigo and gold still read like colored pencil on a dark page instead of disappearing into it. Activation (both, per the brand's request): • Dark applies under an explicit [data-theme="dark"] on a parent (usually ); [data-theme="light"] forces light. This is the design-system contract — set the attribute and the whole token layer flips, no JS. • "OS as default" is delivered by RESOLVING prefers-color-scheme into that attribute at load: the tiny theme controller in each consuming page (see ui_kits/marketplace/index.html) reads the stored choice, else the OS, and stamps data-theme on before first paint — then keeps it in sync as the OS preference changes (until the user picks explicitly). This keeps every dark token under one registrable scope ([data-theme=dark]) instead of a prefers-color-scheme media block, while behaving identically. Implementation: the actual values live ONCE in the --dk-* set on :root (inert in light mode — nothing reads them). One thin selector then remaps the real tokens to them: [data-theme="dark"]. =========================================================================== */ :root { /* ---- Dark walnut grounds (page darkest → raised lighter) ------------- */ --dk-paper: #20180E; /* base page — deep oiled walnut */ --dk-paper-warm: #2A2014; /* cards, raised surfaces */ --dk-paper-deep: #352A1A; /* wells, muted chips, image backdrops */ /* ---- Warm cream ink (text / strokes) --------------------------------- */ --dk-ink: #F1E7D3; /* primary text — warm chalk cream */ --dk-ink-soft: #C8B9A0; /* secondary text, body at ease */ --dk-ink-muted: #93856E; /* captions, meta, disabled */ /* ---- Lifted pigments — brighter + a touch desaturated for dark ------- In dark, the "-deep" variant is the BRIGHTER one: it does the work of legible accent text on tinted fills, feedback colors, and hover-lighten states, where a darker pressed tone would vanish on walnut. */ --dk-terracotta: #DB8568; --dk-terracotta-deep: #E89A80; --dk-moss: #A2B57E; --dk-moss-deep: #B6C896; --dk-indigo: #92A2C2; --dk-indigo-deep: #AAB8D4; --dk-gold: #D6BA86; --dk-gold-deep: #E2CA9E; /* ---- Hairlines — warm cream at low alpha over walnut ----------------- */ --dk-line-faint: rgba(241, 231, 211, 0.07); --dk-line-soft: rgba(241, 231, 211, 0.11); --dk-line: rgba(241, 231, 211, 0.15); --dk-line-strong: rgba(241, 231, 211, 0.22); /* ---- Tier tints — lifted pigment at moderate alpha on walnut --------- */ --dk-tier-featured-bg: rgba(146, 162, 194, 0.18); --dk-tier-signed-bg: rgba(162, 181, 126, 0.18); --dk-tier-heirloom-bg: rgba(219, 133, 104, 0.15); /* ---- Elevation — warm near-black, deeper + more opaque on dark ------- */ --dk-shadow-xs: 0 1px 2px rgba(8, 5, 3, 0.40); --dk-shadow-sm: 0 1px 2px rgba(8, 5, 3, 0.40), 0 4px 12px -6px rgba(8, 5, 3, 0.55); --dk-shadow: 0 1px 2px rgba(8, 5, 3, 0.40), 0 8px 24px -12px rgba(8, 5, 3, 0.62), 0 24px 48px -24px rgba(8, 5, 3, 0.50); --dk-shadow-lg: 0 2px 4px rgba(8, 5, 3, 0.45), 0 20px 40px -16px rgba(8, 5, 3, 0.66), 0 40px 80px -24px rgba(8, 5, 3, 0.52); --dk-shadow-pop: 0 2px 4px rgba(8, 5, 3, 0.45), 0 20px 40px -16px rgba(8, 5, 3, 0.72), 0 40px 80px -24px rgba(8, 5, 3, 0.58); --dk-shadow-btn-hover: 0 8px 20px -8px rgba(8, 5, 3, 0.62); /* ---- Focus & overlay ------------------------------------------------- */ --dk-focus-ring: rgba(241, 231, 211, 0.14); --dk-focus-ring-danger: rgba(232, 154, 128, 0.22); --dk-scrim: rgba(8, 5, 3, 0.62); } /* --------------------------------------------------------------------------- The remap. Listed once per selector; values come entirely from --dk-* above, so there is a single source of truth for every dark color. --------------------------------------------------------------------------- */ [data-theme="dark"] { --paper: var(--dk-paper); --paper-warm: var(--dk-paper-warm); --paper-deep: var(--dk-paper-deep); --ink: var(--dk-ink); --ink-soft: var(--dk-ink-soft); --ink-muted: var(--dk-ink-muted); --terracotta: var(--dk-terracotta); --terracotta-deep: var(--dk-terracotta-deep); --moss: var(--dk-moss); --moss-deep: var(--dk-moss-deep); --indigo: var(--dk-indigo); --indigo-deep: var(--dk-indigo-deep); --gold: var(--dk-gold); --gold-deep: var(--dk-gold-deep); --line-faint: var(--dk-line-faint); --line-soft: var(--dk-line-soft); --line: var(--dk-line); --line-strong: var(--dk-line-strong); /* Tier fills (the foregrounds already cascade through the lifted pigments) */ --tier-featured-bg: var(--dk-tier-featured-bg); --tier-featured-fg: var(--indigo-deep); --tier-signed-bg: var(--dk-tier-signed-bg); --tier-signed-fg: var(--moss-deep); --tier-heirloom-bg: var(--dk-tier-heirloom-bg); --tier-heirloom-fg: var(--terracotta-deep); --shadow-xs: var(--dk-shadow-xs); --shadow-sm: var(--dk-shadow-sm); --shadow: var(--dk-shadow); --shadow-lg: var(--dk-shadow-lg); --shadow-pop: var(--dk-shadow-pop); --shadow-btn-hover: var(--dk-shadow-btn-hover); --focus-ring: var(--dk-focus-ring); --focus-ring-danger: var(--dk-focus-ring-danger); --scrim: var(--dk-scrim); color-scheme: dark; } /* --------------------------------------------------------------------------- Texture in dark — the multiply grain would vanish on walnut, so swap to a LIGHT grain under a screen blend (the tooth shows as a faint highlight), and let the speck layer follow the now-light --ink-muted automatically. Per request: a soft screen/overlay blend so the paper tooth still reads. --------------------------------------------------------------------------- */ [data-theme="dark"] .paper-grain { background-image: var(--grain-noise-light); mix-blend-mode: screen; opacity: 0.22; } [data-theme="dark"] .paper-specks { opacity: 0.10; }