/* |-------------------------------------------------------------------------- | Design Tokens — single source of truth |-------------------------------------------------------------------------- | Every visual decision in the Design System resolves to a token defined | here. Components NEVER hardcode raw values; they consume Tailwind | utilities which map to these CSS custom properties (see tailwind.config.js). | | Color values are stored as space-separated RGB triplets so Tailwind can | apply alpha: rgb(var(--ds-primary-600) / ). | | Dark mode: the `.dark` class on swaps the semantic layer only. | Primitive scales stay constant; semantics remap onto them. */ :root { /* ------------------------------------------------------------------ */ /* Primitive scales */ /* ------------------------------------------------------------------ */ /* Brand primary — refined indigo (enterprise, not playful) */ --ds-primary-50: 238 242 255; --ds-primary-100: 224 231 255; --ds-primary-200: 199 210 254; --ds-primary-300: 165 180 252; --ds-primary-400: 129 140 248; --ds-primary-500: 99 102 241; --ds-primary-600: 79 70 229; --ds-primary-700: 67 56 202; --ds-primary-800: 55 48 163; --ds-primary-900: 49 46 129; --ds-primary-950: 30 27 75; /* Neutral — cool gray (Linear/Vercel temperature) */ --ds-neutral-0: 255 255 255; --ds-neutral-50: 250 250 250; --ds-neutral-100: 244 244 245; --ds-neutral-200: 228 228 231; --ds-neutral-300: 212 212 216; --ds-neutral-400: 161 161 170; --ds-neutral-500: 113 113 122; --ds-neutral-600: 82 82 91; --ds-neutral-700: 63 63 70; --ds-neutral-800: 39 39 42; --ds-neutral-900: 24 24 27; --ds-neutral-950: 9 9 11; /* Status scales */ --ds-success-50: 236 253 245; --ds-success-100: 209 250 229; --ds-success-500: 16 185 129; --ds-success-600: 5 150 105; --ds-success-700: 4 120 87; --ds-success-900: 6 78 59; --ds-warning-50: 255 251 235; --ds-warning-100: 254 243 199; --ds-warning-500: 245 158 11; --ds-warning-600: 217 119 6; --ds-warning-700: 180 83 9; --ds-warning-900: 120 53 15; --ds-danger-50: 254 242 242; --ds-danger-100: 254 226 226; --ds-danger-500: 239 68 68; --ds-danger-600: 220 38 38; --ds-danger-700: 185 28 28; --ds-danger-900: 127 29 29; --ds-info-50: 239 246 255; --ds-info-100: 219 234 254; --ds-info-500: 59 130 246; --ds-info-600: 37 99 235; --ds-info-700: 29 78 216; --ds-info-900: 30 58 138; /* ------------------------------------------------------------------ */ /* Semantic tokens — LIGHT */ /* ------------------------------------------------------------------ */ /* Surfaces */ --ds-surface-page: var(--ds-neutral-50); /* app background */ --ds-surface: var(--ds-neutral-0); /* cards, panels */ --ds-surface-raised: var(--ds-neutral-0); /* popovers, menus */ --ds-surface-sunken: var(--ds-neutral-100); /* wells, table heads */ --ds-surface-overlay: 9 9 11; /* scrim base (alpha applied) */ --ds-surface-inverted: var(--ds-neutral-900); /* Foreground */ --ds-fg: var(--ds-neutral-900); --ds-fg-muted: var(--ds-neutral-600); --ds-fg-subtle: var(--ds-neutral-400); --ds-fg-inverted: var(--ds-neutral-0); --ds-fg-brand: var(--ds-primary-600); /* Borders */ --ds-border: var(--ds-neutral-200); --ds-border-strong: var(--ds-neutral-300); --ds-border-focus: var(--ds-primary-500); /* Interactive */ --ds-accent: var(--ds-primary-600); --ds-accent-hover: var(--ds-primary-700); --ds-accent-subtle: var(--ds-primary-50); --ds-accent-fg: var(--ds-neutral-0); /* Status surfaces (chips, cashflow, alerts) */ --ds-success-subtle: var(--ds-success-50); --ds-success-emphasis: var(--ds-success-700); --ds-warning-subtle: var(--ds-warning-50); --ds-warning-emphasis: var(--ds-warning-700); --ds-danger-subtle: var(--ds-danger-50); --ds-danger-emphasis: var(--ds-danger-700); --ds-info-subtle: var(--ds-info-50); --ds-info-emphasis: var(--ds-info-700); --ds-brand-subtle: var(--ds-primary-50); --ds-brand-emphasis: var(--ds-primary-700); /* ------------------------------------------------------------------ */ /* Non-color tokens */ /* ------------------------------------------------------------------ */ /* Radius */ --ds-radius-xs: 0.25rem; /* 4px — chips, badges */ --ds-radius-sm: 0.375rem; /* 6px — inputs, buttons */ --ds-radius-md: 0.5rem; /* 8px — cards, menus */ --ds-radius-lg: 0.75rem; /* 12px — modals, drawers */ --ds-radius-xl: 1rem; /* 16px — hero panels */ --ds-radius-full: 9999px; /* Shadows (Premium diffuse, Linear/Stripe style) */ --ds-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04); --ds-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 2px 6px 0 rgb(0 0 0 / 0.03); --ds-shadow-md: 0 4px 12px 0 rgb(0 0 0 / 0.05), 0 1px 4px 0 rgb(0 0 0 / 0.03); --ds-shadow-lg: 0 8px 24px 0 rgb(0 0 0 / 0.06), 0 2px 8px 0 rgb(0 0 0 / 0.04); --ds-shadow-overlay: 0 20px 40px 0 rgb(0 0 0 / 0.08), 0 4px 12px 0 rgb(0 0 0 / 0.05); /* Focus ring */ --ds-ring-width: 2px; --ds-ring-offset: 2px; /* Motion */ --ds-duration-instant: 75ms; --ds-duration-fast: 150ms; --ds-duration-base: 200ms; --ds-duration-slow: 300ms; --ds-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --ds-ease-out: cubic-bezier(0, 0, 0.2, 1); --ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Typography */ --ds-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --ds-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace; /* Z-index layers */ --ds-z-sticky: 20; --ds-z-sidebar: 30; --ds-z-topbar: 40; --ds-z-drawer: 50; --ds-z-modal: 60; --ds-z-toast: 70; --ds-z-command: 80; } /* ---------------------------------------------------------------------- */ /* Semantic tokens — DARK */ /* ---------------------------------------------------------------------- */ .dark { color-scheme: dark; --ds-surface-page: var(--ds-neutral-950); --ds-surface: var(--ds-neutral-900); --ds-surface-raised: var(--ds-neutral-800); --ds-surface-sunken: 18 18 21; --ds-surface-overlay: 0 0 0; --ds-surface-inverted: var(--ds-neutral-50); --ds-fg: var(--ds-neutral-100); --ds-fg-muted: var(--ds-neutral-400); --ds-fg-subtle: var(--ds-neutral-500); --ds-fg-inverted: var(--ds-neutral-900); --ds-fg-brand: var(--ds-primary-400); --ds-border: var(--ds-neutral-800); --ds-border-strong: var(--ds-neutral-700); --ds-border-focus: var(--ds-primary-400); --ds-accent: var(--ds-primary-500); --ds-accent-hover: var(--ds-primary-400); --ds-accent-subtle: 49 46 129; --ds-accent-fg: var(--ds-neutral-0); /* Remap pastel status bases so bg-*-50 / text-*-700 stay readable on dark */ --ds-success-50: 6 78 59; --ds-success-100: 6 95 70; --ds-success-700: 110 231 183; --ds-warning-50: 120 53 15; --ds-warning-100: 146 64 14; --ds-warning-700: 252 211 77; --ds-danger-50: 127 29 29; --ds-danger-100: 153 27 27; --ds-danger-700: 252 165 165; --ds-info-50: 30 58 138; --ds-info-100: 30 64 175; --ds-info-700: 147 197 253; --ds-primary-50: 49 46 129; --ds-primary-100: 55 48 163; /* Semantic status surfaces (cashflow / chips) */ --ds-success-subtle: var(--ds-success-50); --ds-success-emphasis: var(--ds-success-700); --ds-warning-subtle: var(--ds-warning-50); --ds-warning-emphasis: var(--ds-warning-700); --ds-danger-subtle: var(--ds-danger-50); --ds-danger-emphasis: var(--ds-danger-700); --ds-info-subtle: var(--ds-info-50); --ds-info-emphasis: var(--ds-info-700); --ds-brand-subtle: var(--ds-primary-50); --ds-brand-emphasis: var(--ds-primary-400); --ds-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4); --ds-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px 0 rgb(0 0 0 / 0.4); --ds-shadow-md: 0 4px 12px 0 rgb(0 0 0 / 0.5), 0 2px 6px 0 rgb(0 0 0 / 0.4); --ds-shadow-lg: 0 10px 24px 0 rgb(0 0 0 / 0.6), 0 4px 12px 0 rgb(0 0 0 / 0.4); --ds-shadow-overlay: 0 20px 40px 0 rgb(0 0 0 / 0.7), 0 8px 16px 0 rgb(0 0 0 / 0.5); } /* Respect OS-level reduced motion globally */ @media (prefers-reduced-motion: reduce) { :root { --ds-duration-instant: 0ms; --ds-duration-fast: 0ms; --ds-duration-base: 0ms; --ds-duration-slow: 0ms; } }