/* Design tokens (CSS custom properties). Every color used elsewhere in this project should reference one of these variables — never hardcode a hex value in layout.css or components.css. That's what makes a re-theme (or a dark mode tweak) a one-file change instead of a find-and-replace across the project. Light palette is the default (":root"). Dark palette applies either when the OS is in dark mode (prefers-color-scheme) or when the page is forced into dark mode via ``. */ :root { --bg: #EAF6FB; --surface: #FFFFFF; --surface-2: #D8EEF3; --ink: #182238; --ink-soft: #48566E; --ink-faint: #7C8AA0; --accent: #2BBDD4; --accent-2: #00D8BF; --accent-strong: #0E7C93; --accent-deep: #1690A3; --on-accent: #06222A; --line: #CDE7EE; --line-strong: #A9CFDA; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #060D1F; --surface: #0E1830; --surface-2: #142338; --ink: #E7F4F7; --ink-soft: #A7BDCB; --ink-faint: #6B8091; --accent: #35CBE0; --accent-2: #1EE9CB; --accent-strong: #6FE1EF; --accent-deep: #7EE0EE; --on-accent: #04141A; --line: #1D2E45; --line-strong: #2C4159; } } :root[data-theme="dark"] { --bg: #060D1F; --surface: #0E1830; --surface-2: #142338; --ink: #E7F4F7; --ink-soft: #A7BDCB; --ink-faint: #6B8091; --accent: #35CBE0; --accent-2: #1EE9CB; --accent-strong: #6FE1EF; --accent-deep: #7EE0EE; --on-accent: #04141A; --line: #1D2E45; --line-strong: #2C4159; }