/* hjadmz · Theme extension · site layer --------------------------------------------------------------------------- tokens.css (canonical, copied verbatim from brand_system/tokens/) resolves light/dark from prefers-color-scheme ONLY. This file adds the third state: an explicit user choice, stamped as data-theme on . Contract — three states, and the tokens must resolve in all three: data-theme absent → follow the OS (tokens.css media query does the work) data-theme="light" → force light, even when the OS is dark data-theme="dark" → force dark, even when the OS is light No new colors are introduced here. Every value below is lifted from tokens.css so there remains exactly one source of truth for palette. --------------------------------------------------------------------------- */ /* Force-light: re-assert the tokens.css :root defaults so an OS-dark visitor who picks light gets light. Same values, higher specificity. */ :root[data-theme="light"] { --color-bg: #F9FAFB; --color-surface: #FFFFFF; --color-surface-raised: #F1F5F9; --color-text: #020617; --color-text-muted: #475569; --color-text-faint: #64748B; --color-highlight-text: #000000; --color-highlight-bg: #FFFFFF; --color-text-link: #1E40AF; --color-text-link-hover: #1E3A8A; --color-border: #CBD5E1; --color-border-subtle: #E2E8F0; --color-ring: #1E40AF; --color-error: #B91C1C; --color-error-subtle: #FEE2E2; --color-warning: #92400E; --color-warning-subtle: #FEF3C7; --color-success: #14532D; --color-success-subtle: #DCFCE7; --color-mark: #020617; color-scheme: light; } /* Force-dark: the tokens.css dark block, restated outside the media query. */ :root[data-theme="dark"] { --color-bg: #020617; --color-surface: #0F172A; --color-surface-raised: #1E293B; --color-text: #E2E8F0; --color-text-muted: #97A6BB; --color-text-faint: #8293A5; --color-highlight-text: #FFFFFF; --color-highlight-bg: #000000; --color-text-link: #60A5FA; --color-text-link-hover: #93C5FD; --color-border: #334155; --color-border-subtle: #1E293B; --color-ring: #60A5FA; --color-error: #FCA5A5; --color-error-subtle: #450A0A; --color-warning: #FCD34D; --color-warning-subtle: #451A03; --color-success: #86EFAC; --color-success-subtle: #052E16; --color-mark: #F9FAFB; color-scheme: dark; } /* Let the browser paint form controls and scrollbars to match in the follow-the-OS state too. */ :root { color-scheme: light dark; } /* ─── Print ───────────────────────────────────────────────────────────────── [data-theme="dark"] is an attribute selector, not a media query, so it stays active while printing — a visitor reading in dark mode would otherwise print near-white text onto white paper. Paper is always the light palette. These values are the light tokens restated; this file is the one place in the site layer where palette hex legitimately appears. */ @media print { :root, :root[data-theme="dark"], :root[data-theme="light"] { --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-text: #000000; --color-text-muted: #333333; --color-text-faint: #555555; --color-text-link: #000000; --color-text-link-hover: #000000; --color-border: #999999; --color-border-subtle: #CCCCCC; --color-mark: #000000; color-scheme: light; } }