/* 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; } /* Weekwright design tokens — full set. colors.css holds the palette (light/dark). This file adds everything else: type, space, shape, elevation, motion — mirroring Weekwright/app apps/web/src/styles/tokens.css. Import this file (it pulls in colors.css) wherever you want the complete system, not just color. */ :root { /* Type */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --text-xs: 0.71875rem; /* 11.5px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px */ --text-md: 1rem; /* 16px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.625rem; /* 26px */ --text-2xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem); --text-metric: clamp(1.5rem, 1.2rem + 0.9vw, 1.875rem); --leading-tight: 1.2; --leading-body: 1.5; --tracking-tight: -0.02em; --tracking-label: 0.07em; /* Space, 4px base */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* Shape */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px; /* Elevation (light) */ --shadow-1: 0 1px 2px rgba(15, 20, 25, 0.05); --shadow-2: 0 1px 2px rgba(15, 20, 25, 0.06), 0 12px 28px -14px rgba(15, 20, 25, 0.18); /* Layout */ --sidebar-width: 15rem; --content-max: 68rem; /* Email preview: real email stays light in both themes, like a mail client */ --color-mail-bg: #ffffff; --color-mail-paper: #f7f5f0; --color-mail-ink: #0f1419; --color-mail-muted: #5c5750; --color-mail-line: #e4e0d8; /* Motion */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 120ms; --dur: 200ms; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px -14px rgba(0, 0, 0, 0.6); } } :root[data-theme='dark'] { --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px -14px rgba(0, 0, 0, 0.6); }