/* ========================================================================== Automatic (system-preference) theming. The design tokens ship dark on :root and light on [data-theme="light"], so out of the box a page is dark until something sets the attribute. That means system-preference theming would need JavaScript on the critical path, and light-mode visitors would see a dark flash before it ran. This file closes that gap: when no explicit choice has been made — i.e. the element carries no data-theme — the light palette applies from the OS preference alone. assets/site.js therefore only sets data-theme for an explicit Light or Dark choice, and REMOVES it for System, handing control back to the media query below. No flash, and the theme still tracks the OS with JavaScript disabled. ⚠ These values mirror [data-theme="light"] in _ds/scope-design-system-v2-.../tokens/colors.css If that file is ever re-synced from the design system, update this block to match. It is the one place in the site that repeats token values. ========================================================================== */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --scope-bg-0: #d9dde0; --scope-bg-1: #f2f4f5; --scope-bg-2: #e6eaec; --scope-bg-3: #dadfe2; --scope-line: #c7cdd2; --scope-line-2: #a9b2b8; --scope-ink-1: #16191b; --scope-ink-2: #4c555b; --scope-ink-3: #616a70; --scope-green: #2f7a33; --scope-green-hi: #215626; --scope-green-lo: #3c9440; --scope-green-tint: rgba(47, 122, 51, 0.14); --scope-green-tint-strong: rgba(47, 122, 51, 0.2); --scope-on-accent: #f2f4f5; --scope-amber: #8a6200; --scope-red: #c62f2f; --scope-wave-bg: #e9edef; --scope-meter-col-bg: #dfe4e7; --scope-meter-gap: #cbd2d6; --scope-meter-peak-cap: #215626; --scope-play-btn-bg: #e4efe0; --scope-play-glow: rgba(47, 122, 51, 0.18); --scope-outline-btn-bg: rgba(242, 244, 245, 0.8); --scope-scrim: rgba(58, 63, 66, 0.45); --scope-hud-bg: rgba(242, 244, 245, 0.92); --scope-chip-overlay-bg: rgba(242, 244, 245, 0.88); --scope-shadow-dialog: 0 12px 48px rgba(22, 25, 27, 0.28); color-scheme: light; } }