/* * Design tokens — single source of truth for visual values. * * Philosophy: Modern SaaS (Linear / Vercel / Stripe-inspired). * - zinc-family neutrals + blue-500 accent * - medium radii (6-12px), subtle shadows * - 4px-base spacing scale * - system-ui type stack * * Authored per ADR 0052. Token names use the semantic-role naming from * the design-tokens skill (e.g. `--color-bg-primary`, not `--color-white`) * so the same value can shift meaning across light / dark. * * Dark mode is opt-in only: . We deliberately * do not auto-flip on prefers-color-scheme — light is the polished * design, dark is functional but rougher. The toggle in the header * sets data-theme and persists the choice to localStorage. * * MUI theme (apps/web/src/styles/theme.ts) duplicates these palette * values so MUI components flip with the mode. Keep the two in sync; * a future iter will collapse this when MUI v6's css-var support * matures. */ :root { /* ---- Color ---- */ --color-bg-primary: #ffffff; --color-bg-secondary: #fafafa; --color-bg-tertiary: #f4f4f5; --color-bg-inverse: #18181b; --color-text-primary: #18181b; --color-text-secondary: #52525b; --color-text-tertiary: #a1a1aa; --color-text-inverse: #fafafa; --color-text-link: #2563eb; --color-border-primary: #e4e4e7; --color-border-secondary: #d4d4d8; --color-border-focus: #3b82f6; --color-accent-primary: #3b82f6; --color-accent-primary-hover: #2563eb; --color-accent-primary-active: #1d4ed8; --color-accent-secondary: #71717a; --color-status-success: #10b981; --color-status-warning: #f59e0b; --color-status-error: #ef4444; --color-status-info: #3b82f6; /* Soft fills for status chips, banners, and the SVG-illustration * primitives (which use them as low-temperature heatmap cells + * accent-card backgrounds). Light mode = pastel tints; dark mode = * 16% rgba over the hue. */ --color-status-success-soft: #d1fae5; --color-status-warning-soft: #fef3c7; --color-status-error-soft: #fee2e2; --color-status-info-soft: #dbeafe; --color-surface-overlay: rgba(0, 0, 0, 0.5); /* ---- Spacing (4px base) ---- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --space-11: 12rem; --space-12: 16rem; /* ---- Typography ---- */ --font-family-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-body: var(--font-family-display); --font-family-mono: ui-monospace, 'SF Mono', Menlo, 'Cascadia Code', 'Roboto Mono', monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.0625rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.05em; /* ---- Layout ---- */ --max-width-content: 65ch; --max-width-wide: 1280px; --max-width-page: 1536px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* ---- Shadows ---- */ --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.08); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.08); --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.4); /* ---- Motion ---- */ --duration-instant: 50ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --easing-default: cubic-bezier(0.4, 0, 0.2, 1); --easing-in: cubic-bezier(0.4, 0, 1, 1); --easing-out: cubic-bezier(0, 0, 0.2, 1); --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- Breakpoints (informational — MUI keeps its own scale) ---- */ --breakpoint-sm: 375px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; } /* Manual override (the ColorModeProvider sets this attribute). */ /* Force light-mode values on any subtree carrying [data-theme="light"]. * Used by surfaces that opt out of the user's color preference (e.g. * /sign-in, which is always presented in light regardless of the * signed-out user's system dark preference). Mirror of :root above. */ [data-theme='light'] { --color-bg-primary: #ffffff; --color-bg-secondary: #fafafa; --color-bg-tertiary: #f4f4f5; --color-bg-inverse: #18181b; --color-text-primary: #18181b; --color-text-secondary: #52525b; --color-text-tertiary: #a1a1aa; --color-text-inverse: #fafafa; --color-text-link: #2563eb; --color-border-primary: #e4e4e7; --color-border-secondary: #d4d4d8; --color-border-focus: #3b82f6; --color-accent-primary: #3b82f6; --color-accent-primary-hover: #2563eb; --color-accent-primary-active: #1d4ed8; --color-accent-secondary: #71717a; --color-status-success: #10b981; --color-status-warning: #f59e0b; --color-status-error: #ef4444; --color-status-info: #3b82f6; --color-status-success-soft: #d1fae5; --color-status-warning-soft: #fef3c7; --color-status-error-soft: #fee2e2; --color-status-info-soft: #dbeafe; } [data-theme='dark'] { --color-bg-primary: #09090b; --color-bg-secondary: #18181b; --color-bg-tertiary: #27272a; --color-bg-inverse: #fafafa; --color-text-primary: #fafafa; --color-text-secondary: #a1a1aa; --color-text-tertiary: #71717a; --color-text-inverse: #18181b; --color-text-link: #60a5fa; --color-border-primary: #27272a; --color-border-secondary: #3f3f46; --color-border-focus: #60a5fa; --color-accent-primary: #3b82f6; --color-accent-primary-hover: #60a5fa; --color-accent-primary-active: #93c5fd; --color-accent-secondary: #a1a1aa; --color-status-success: #34d399; --color-status-warning: #fbbf24; --color-status-error: #f87171; --color-status-info: #60a5fa; --color-status-success-soft: rgba(52, 211, 153, 0.16); --color-status-warning-soft: rgba(251, 191, 36, 0.16); --color-status-error-soft: rgba(248, 113, 113, 0.16); --color-status-info-soft: rgba(96, 165, 250, 0.18); --color-surface-overlay: rgba(0, 0, 0, 0.7); --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5); --shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.5); } /* Reduce or remove motion for users who prefer it. Components that read the motion tokens (or use them via MUI transitions) inherit this. */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; } }