/* Open Design System – color tokens * ─────────────────────────────────────────────────────────────────────── * THEME ARCHITECTURE * * The design system is "semantic primitives": the primitive token NAMES * (`--ods-*`) are stable across themes — only their VALUES change between * light and dark (sourced 1:1 from `dark theme.tokens.json` / * `light theme.tokens.json`). * * Tier 1 — Primitives (`--ods-*`), THEME-SCOPED * • `:root, [data-theme="dark"], .theme-dark` → dark values (default) * • `[data-theme="light"], .theme-light` → light values * A handful of explicitly-named fixed shades (…-dark / …-light) and the * third-party social brand colors are theme-stable. * * Tier 2 — Semantic aliases (`--color-*`), THEME-AGNOSTIC (single source) * They reference `--ods-*`, so they resolve to the correct theme * automatically — no per-theme duplication. Only a few alpha-based * tokens get a light tweak. * * Platform overrides (`[data-app-type="…"]`) set ONLY brand/accent and * reference `--ods-*`, so they too follow the active theme. They never * touch bg/text/border, so theme (on ) and platform (on ) * compose cleanly even though they live on different elements. * * Theme is selected via `data-theme="light|dark"` on (set by the * ThemeProvider + the no-flash ThemeScript). Default: dark. * ─────────────────────────────────────────────────────────────────────── */ /* ===================================================================== */ /* TIER 1 — PRIMITIVES · DARK (default, lives in :root) */ /* Removing the theme attribute reverts here automatically. */ /* ===================================================================== */ :root, :root[data-theme="dark"], .theme-dark { /* Declared color scheme — MUST track the active theme scope. * Two jobs: * 1. Native UA surfaces (scrollbars, form controls, date/month pickers, *