/* Opus Hub — design tokens (UI spec §1). One set of names; light and dark are two value tables. js/theme.js resolves the Appearance preference (System · Light · Dark) and sets data-theme on before first paint. Colour is only ever a signal or a class. */ :root { color-scheme: light; /* 1.1 ground and ink */ --ground: #F4F3F0; --card: #FFFFFF; --bar: #F9F9F8; --ink: #1C1C1E; --ink-2: #6B6B70; --ink-3: #73737A; --ink-4: #9A9AA0; --ink-soft: #3A3A3C; /* unselected segment text (canvas) */ --tick-border: #A8A8AE; --chevron: #C7C7CC; --fill: #E9E8E4; --fill-2: #F2F2F7; --quote: #E5E5EA; --skeleton: #EDEDF0; --hairline: rgba(60, 60, 67, .18); --hairline-strong: rgba(60, 60, 67, .24); --hairline-soft: rgba(60, 60, 67, .12); --thumb-shadow: 0 1px 2px rgba(0, 0, 0, .08); --toast-shadow: 0 6px 20px rgba(0, 0, 0, .18); /* 1.2 signals */ --accent: #0A6CD6; --ok: #2A7F4F; --pending: #6A4FC9; --attention: #A85A0C; --deadline: #C93C1B; /* banners (soft tiles) */ --banner-amber: #FBEFD9; --banner-amber-ink: #7A4A05; --banner-red: #F8E0D8; --banner-red-ink: #7A1F0C; --banner-button: rgba(0, 0, 0, .08); /* 1.3 the seven calendar classes (scheduled item = hollow ink bar, no colour of its own) */ --cls-meeting: #3B78D8; --cls-personal: #2FA36E; --cls-due: #E08A1E; --cls-deadline: #D0451B; --cls-daymark: #EDE4CC; --cls-chase: #C4569C; /* 1.5 type — one unit so sizes are exact design pixels at the default text size and still follow the user's text-size setting (iOS Dynamic Type, browser font size) */ --u: calc(1rem / 16); --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif; /* 1.6 spacing and radii */ --gutter: 16px; --card-inset: 16px; --card-gap: 20px; --r-chip: 6px; --r-seg: 8px; --r-field: 10px; --r-card: 12px; --r-sheet: 14px; } :root[data-theme="dark"] { color-scheme: dark; --ground: #000000; --card: #1C1C1E; --bar: #161618; --ink: #F2F2F7; --ink-2: #98989E; --ink-3: #8E8E93; --ink-4: #6E6E73; --ink-soft: #D1D1D6; --tick-border: #5C5C61; --chevron: #48484A; --fill: #2C2C2E; --fill-2: #2C2C2E; --quote: #3A3A3C; --skeleton: #2C2C2E; --hairline: rgba(84, 84, 88, .6); --hairline-strong: rgba(84, 84, 88, .65); --hairline-soft: rgba(84, 84, 88, .4); --thumb-shadow: 0 1px 2px rgba(0, 0, 0, .5); --toast-shadow: 0 6px 20px rgba(0, 0, 0, .5); --accent: #3B8EEA; --ok: #4CC38A; --pending: #A08BEA; --attention: #E8A24A; --deadline: #FF6B4A; --banner-amber: #3A2A10; --banner-amber-ink: #F0C070; --banner-red: #3A1A14; --banner-red-ink: #FF9A80; --banner-button: rgba(255, 255, 255, .14); --cls-meeting: #5B93E8; --cls-personal: #46BE84; --cls-due: #F0A040; --cls-deadline: #F0664A; --cls-daymark: #4A4230; --cls-chase: #DA74B4; } /* iOS: the root font follows Dynamic Type (17 px at the default size), so the unit is /17 */ @supports (font: -apple-system-body) { html { font: -apple-system-body; } :root { --u: calc(1rem / 17); } }