/* Weekwright design tokens — colors. Source of truth: mirrors Weekwright/app apps/web/src/styles/tokens.css. Components read roles (--color-surface), never raw hex. Every role has a light and a dark value. Dark mode follows the OS by default and can be forced with data-theme="dark" or "light" on . */ :root { /* Color roles, light */ --color-bg: #f7f5f0; --color-surface: #ffffff; --color-sunken: #efece4; --color-ink: #0f1419; --color-muted: #5c5750; --color-line: #e4e0d8; --color-line-strong: #cfc9bd; --color-accent: #1f6b5c; --color-accent-strong: #175245; --color-accent-soft: #e2efe9; --color-on-accent: #ffffff; --color-pop: #5a45d6; --color-pop-soft: #ece9fb; --color-on-pop: #ffffff; --color-warn: #9a4507; --color-warn-soft: #faeddb; --color-danger: #9b2c2c; --color-danger-soft: #f8e4e2; --color-overlay: rgba(15, 20, 25, 0.42); --color-focus: #1f6b5c; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --color-bg: #111517; --color-surface: #191f22; --color-sunken: #0e1214; --color-ink: #f1eee7; --color-muted: #a39d94; --color-line: #2a3236; --color-line-strong: #3a444a; --color-accent: #5cbca4; --color-accent-strong: #7fd0ba; --color-accent-soft: #1b2d29; --color-on-accent: #06201a; --color-pop: #a99cff; --color-pop-soft: #25214a; --color-on-pop: #100c33; --color-warn: #e8ad62; --color-warn-soft: #332a1a; --color-danger: #ee9a94; --color-danger-soft: #3a2321; --color-overlay: rgba(0, 0, 0, 0.6); --color-focus: #7fd0ba; color-scheme: dark; } } :root[data-theme='dark'] { --color-bg: #111517; --color-surface: #191f22; --color-sunken: #0e1214; --color-ink: #f1eee7; --color-muted: #a39d94; --color-line: #2a3236; --color-line-strong: #3a444a; --color-accent: #5cbca4; --color-accent-strong: #7fd0ba; --color-accent-soft: #1b2d29; --color-on-accent: #06201a; --color-pop: #a99cff; --color-pop-soft: #25214a; --color-on-pop: #100c33; --color-warn: #e8ad62; --color-warn-soft: #332a1a; --color-danger: #ee9a94; --color-danger-soft: #3a2321; --color-overlay: rgba(0, 0, 0, 0.6); --color-focus: #7fd0ba; color-scheme: dark; }