/* ================================================ Design Tokens — single source of truth for the visual language. Change values here, everything updates. Style: SharedTasks design system — near-black primary CTAs, blue accent for brand moments, Inter body + Cal Sans display. Theme — light/dark via `light-dark()`. Default follows the OS via `color-scheme: light dark`; `[data-theme="light|dark"]` (set on by themeBoot.js / themeInterop.js) overrides by switching the resolved color-scheme. `light-dark()` keys off the resolved scheme, so flipping the attribute swaps every token in this file at once. Light values track Direction A (A_TOK in direction-a-mocks.jsx); dark values track A_TOK_DARK. UI and Marketing share the same palette under different namespaces (Marketing uses --canvas/--ink/--accent etc., UI uses --color-bg/--color-text/--color-primary etc.) — values match across. ================================================ */ :root { color-scheme: light dark; /* --- Neutral palette --------------------------- */ --color-bg: light-dark(#ffffff, #131316); /* design: canvas */ --color-surface: light-dark(#ffffff, #1f1f24); --color-surface-alt: light-dark(#f4f4f5, #1a1a1e); /* design: surfaceCard / surfaceSoft */ --color-border: light-dark(#e8e8ea, #323239); /* design: hairline */ --color-border-strong: light-dark(#dedee1, #3a3a42); --color-neutral-100: light-dark(#f1f1f3, #292930); /* design: hairlineSoft */ --color-bg-hover: light-dark(rgba(14, 14, 16, 0.04), rgba(255, 255, 255, 0.04)); --color-text: light-dark(#0e0e10, #f4f4f6); /* design: ink */ --color-text-muted: light-dark(#3a3a42, #c8c8d0); /* design: body — paragraph + secondary copy */ --color-text-faint: light-dark(#75757f, #8a8a93); /* design: muted — timestamps, completed, tertiary */ --color-text-inverse: #ffffff; /* Links read as accent — primary is near-black so links would otherwise be invisible against body copy. */ --color-text-link: var(--color-accent); /* --- Primary: near-black CTAs ------------------- */ /* Used for Save / Create buttons, h1/h2 type, ink-fill selections. The design's CTA identity. Inverts to near-white in dark so CTAs stay high-contrast — the button itself reads as a light pill with dark text rather than the reverse. */ --color-primary: light-dark(#0e0e10, #f4f4f6); /* design: ink */ --color-primary-hover: light-dark(#1c1c20, #e2e3e7); --color-primary-soft: light-dark(rgba(14, 14, 16, 0.08), rgba(244, 244, 246, 0.10)); --color-primary-ring: light-dark(rgba(14, 14, 16, 0.20), rgba(244, 244, 246, 0.22)); /* Foreground for content sitting ON --color-primary (btn-primary, user-menu-avatar). Splits out from --color-text-inverse because the primary surface flips light↔dark with theme; the other inverse-text backgrounds (accent, success, danger) stay colored and keep white. */ --color-on-primary: light-dark(#ffffff, #131316); /* --- Accent: brand blue ------------------------- */ /* Used for brand moments that need to be distinct from CTAs: Up-for-grabs pill, Repeats-active, In-progress dot, link text. Deliberately separate from --color-primary so the design's "near-black with blue accents" identity holds. Lifted in lightness in dark so it reads against dark surfaces. */ --color-accent: light-dark(#2f6df4, #5b8cff); /* design: accent */ --color-accent-hover: light-dark(#2960dc, #7ba3ff); --color-accent-soft: light-dark(rgba(47, 109, 244, 0.12), rgba(91, 140, 255, 0.16)); /* 0.33 alpha matches the design's `accent55` hex notation — single token for every dashed "open / unclaimed" border (Up-for-grabs box, pill, picker avatar, "+ New list" card). */ --color-accent-ring: light-dark(rgba(47, 109, 244, 0.33), rgba(91, 140, 255, 0.32)); /* --- Assignee palette --------------------------- Informational colours for people-avatars (Avatar component) and any row meta that carries identity (assigner pill, owner-themed list rows). Flat colours in design's rainbow order — Avatar.razor indexes into an 8-slot array using these tokens in the order: ruby, warm, amber, sage, aqua, blue, violet, pink. All are deliberately muted (this is the picker palette, not the signal-colour system) — distinct from --color-danger / --color-success which carry meaning. Dark variants are pulled down in lightness so they read calmly against the dark canvas without feeling neon. */ --color-assignee-ruby: light-dark(#db8585, #c25c5c); --color-assignee-warm: light-dark(#efb86b, #d9923c); --color-assignee-amber: light-dark(#e2df76, #c8c03c); --color-assignee-sage: light-dark(#74bda4, #459a7b); --color-assignee-aqua: light-dark(#6cbacb, #3d9fb3); --color-assignee-blue: light-dark(#6c9ce4, #4080d0); --color-assignee-violet: light-dark(#ab97e4, #856bc6); --color-assignee-pink: light-dark(#e29dba, #cd7e9c); } /* --- Per-user accent override --------------------------- Profile's avatar-colour picker writes a `data-accent` slot onto (see accentInterop.js). Each block redefines --color-accent + derivations so every CSS rule that already uses var(--color-accent*) — Up-for-grabs, checkboxes, claim button, in-progress dot, links, active tabs, picker selection, etc. — follows the user's choice automatically. Base colour comes from the same --color-assignee-* token the avatar fills with, so the user's face and their app's accent stay in lockstep. Soft / ring / hover derived via color-mix from the base colour at fixed alphas — matches the default token's intent (12% soft, 33% ring, ~12% darken on hover) without hardcoding 8×2×3 rgba pairs. */ :root[data-accent="ruby"] { --color-accent: var(--color-assignee-ruby); } :root[data-accent="warm"] { --color-accent: var(--color-assignee-warm); } :root[data-accent="amber"] { --color-accent: var(--color-assignee-amber); } :root[data-accent="sage"] { --color-accent: var(--color-assignee-sage); } :root[data-accent="aqua"] { --color-accent: var(--color-assignee-aqua); } :root[data-accent="blue"] { --color-accent: var(--color-assignee-blue); } :root[data-accent="violet"] { --color-accent: var(--color-assignee-violet); } :root[data-accent="pink"] { --color-accent: var(--color-assignee-pink); } :root[data-accent] { --color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, black); --color-accent-soft: color-mix(in srgb, var(--color-accent) 14%, transparent); --color-accent-ring: color-mix(in srgb, var(--color-accent) 36%, transparent); } :root { /* --- Sidebar ----------------------------------- */ /* Computed from the surface tokens above so the sidebar inherits theme without needing its own light/dark pair. */ --color-sidebar: var(--color-surface); --color-sidebar-hover: var(--color-bg-hover); --color-sidebar-active: var(--color-primary-soft); --color-sidebar-text: var(--color-text-muted); --color-sidebar-text-active: var(--color-text); --color-sidebar-divider: var(--color-border); --color-topbar: var(--color-surface); /* --- Semantic + status ------------------------- */ --color-success: light-dark(#05884f, #6cd29b); --color-success-bg: light-dark(#e6f4ec, rgba(5, 150, 105, 0.18)); --color-success-text: light-dark(#05884f, #6cd29b); --color-danger: light-dark(#c81e42, #f87171); --color-danger-bg: light-dark(#fdecef, rgba(225, 29, 72, 0.16)); --color-danger-text: light-dark(#c81e42, #f87171); --color-warning: light-dark(#b45309, #f4b870); --color-warning-bg: light-dark(#fbefd7, rgba(180, 83, 9, 0.22)); --color-info: var(--color-accent); --color-info-bg: var(--color-accent-soft); --color-badge-pending: light-dark(#5e6269, #b8bdc5); --color-badge-inprogress: var(--color-accent); --color-badge-complete: light-dark(#05884f, #6cd29b); /* --- Typography -------------------------------- */ /* Body: Inter (Google Fonts). Display: Cal Sans falls back to Inter 600 with negative tracking — the documented substitute that preserves the geometric / slightly-condensed feel. */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display: 'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.8125rem; /* 13px */ --font-size-base: 0.9375rem; /* 15px */ --font-size-lg: 1.0625rem; /* 17px */ --font-size-xl: 1.375rem; /* 22px */ --font-size-2xl: 1.75rem; /* 28px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height: 1.55; /* --- Spacing ----------------------------------- */ --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; /* --- Layout ------------------------------------ */ --sidebar-width: 248px; --sidebar-width-compact: 64px; --topbar-height: 56px; --tabbar-height: 60px; --content-max-width: 680px; /* --- Borders & Radii --------------------------- */ /* Matched to the design's hierarchical scale: sm 6px — dropdown items, small inline buttons md 8px — standard buttons, inputs, category tabs lg 12px — content cards (feature cards, list cards, tier cards) xl 16px — hero artifacts (hero-app-mockup-card) full — pills, avatars, icon buttons */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --border: 1px solid var(--color-border); /* --- Shadows ----------------------------------- */ /* Light: ink-tinted soft shadows. Dark: deeper black shadows since elevation needs more contrast to read on dark surfaces. The two-step pattern (per-layer light-dark, composed via outer commas) keeps each light-dark() unambiguous — nesting comma-separated shadow lists inside light-dark() arguments confuses the CSS parser. */ --shadow-sm: light-dark(0 1px 2px rgba(14, 14, 16, 0.06), 0 1px 2px rgba(0, 0, 0, 0.40)); --shadow-md-near: light-dark(0 1px 2px rgba(14, 14, 16, 0.04), 0 1px 0 rgba(0, 0, 0, 0.40)); --shadow-md-far: light-dark(0 8px 20px -6px rgba(14, 14, 16, 0.08), 0 12px 24px -8px rgba(0, 0, 0, 0.50)); --shadow-md: var(--shadow-md-near), var(--shadow-md-far); --shadow-lg: light-dark(0 10px 30px -4px rgba(14, 14, 16, 0.16), 0 20px 40px -8px rgba(0, 0, 0, 0.60)); /* --- Motion ------------------------------------ */ --transition: 150ms ease; } /* Manual override — `[data-theme]` on wins over the OS preference by pinning the resolved color-scheme, which is what `light-dark()` keys off. themeBoot.js (inline in index.html) and themeInterop.js set this attribute. */ [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; }