/* ProcessWeave Design System — tokens (Sprint 9A; themes Sprint 9E). * * The single source of visual decisions. Components and screens consume the * *semantic* tokens (--pw-color-text, --pw-space-4, …); the *primitive* * palettes exist only to define them. Never hard-code a colour, size, radius, * shadow or z-index in a component — add or reuse a token. * * Themes: :root holds the light theme. [data-theme="dark"] on * (set by theme.js before first paint) re-points the semantic colour and * elevation tokens at the night palette. Components never change per theme. * * Load order: theme.js → design_tokens.css → components.css. * See docs/design-system/ (README "Theme architecture"). */ :root { color-scheme: light; /* ------------------------------------------------------------------ * 1. Primitive palette (existing ProcessWeave brand values, unchanged) * ------------------------------------------------------------------ */ --pw-navy-950: #0b1428; --pw-navy-900: #0f1a33; --pw-navy-800: #14213d; /* brand chrome */ --pw-navy-700: #1f3157; --pw-navy-600: #2a4170; --pw-blue-700: #174ea9; --pw-blue-600: #1d5fd1; /* brand primary */ --pw-blue-100: #d6e4fb; --pw-blue-50: #e8f0fd; --pw-neutral-0: #ffffff; --pw-neutral-25: #f8fafc; --pw-neutral-50: #f3f5f8; --pw-neutral-100: #e9edf3; --pw-neutral-200: #dde3eb; --pw-neutral-300: #c9d1dd; --pw-neutral-400: #9aa4b5; --pw-neutral-500: #6b7588; --pw-neutral-600: #5b6577; /* AA on neutral-50 (5.4:1) — see UI_AUDIT A-1 */ --pw-neutral-700: #3b4456; --pw-neutral-900: #172033; --pw-green-700: #1a7f37; --pw-green-50: #e7f5ec; --pw-green-200: #bfe3cb; --pw-amber-700: #92400e; --pw-amber-500: #d97706; --pw-amber-50: #fef3c7; --pw-amber-200: #f5d88a; --pw-red-700: #b42318; --pw-red-800: #8f1c13; --pw-red-50: #fdecea; --pw-red-200: #f5c2bd; --pw-gold-400: #ffd666; --pw-gold-600: #b7791f; --pw-lime-700: #3f6e1e; --pw-lime-50: #eef7e8; /* Night palette (dark theme only). Contrast verified by test_design_system. */ --pw-night-950: #0a0f1a; /* chrome */ --pw-night-900: #0c1220; /* canvas */ --pw-night-850: #0f1623; /* sunken */ --pw-night-800: #141b2a; /* surface */ --pw-night-750: #19212f; /* surface subtle */ --pw-night-700: #222b3b; /* neutral subtle */ --pw-night-600: #263045; /* border */ --pw-night-500: #36425a; /* border strong */ --pw-night-400: #5d6880; /* disabled */ --pw-night-300: #9aa5b8; /* muted text */ --pw-night-200: #c3cad7; /* secondary text */ --pw-night-100: #e7ebf3; /* text */ --pw-sky-400: #5b9cf6; --pw-sky-300: #7fb0f8; --pw-sky-200: #8cb8fa; --pw-sky-900: #172a4a; --pw-mint-400: #5ccf7f; --pw-mint-900: #12301e; --pw-mint-800: #1d4a2e; --pw-honey-400: #f2b451; --pw-honey-900: #332611; --pw-honey-800: #5a4217; --pw-coral-400: #f47b70; --pw-coral-300: #f89a91; --pw-coral-900: #3a1719; --pw-coral-800: #5e2427; --pw-leaf-400: #a3d977; --pw-leaf-900: #1f2e14; --pw-gold-500: #e0a93b; /* ------------------------------------------------------------------ * 2. Semantic colour * ------------------------------------------------------------------ */ --pw-color-canvas: var(--pw-neutral-50); /* page background */ --pw-color-surface: var(--pw-neutral-0); /* cards, tables, dialogs */ --pw-color-surface-subtle: var(--pw-neutral-25); /* table header, hover */ --pw-color-surface-sunken: var(--pw-neutral-50); /* wells, code, bulk bars */ --pw-color-border: var(--pw-neutral-100); --pw-color-border-strong: var(--pw-neutral-300); --pw-color-text: var(--pw-neutral-900); --pw-color-text-secondary: var(--pw-neutral-700); --pw-color-text-muted: var(--pw-neutral-600); --pw-color-text-disabled: var(--pw-neutral-400); --pw-color-on-primary: var(--pw-neutral-0); /* text/icons on primary, success, danger fills */ --pw-color-primary: var(--pw-blue-600); --pw-color-primary-hover: var(--pw-blue-700); --pw-color-primary-subtle: var(--pw-blue-50); --pw-color-primary-border: var(--pw-blue-100); --pw-color-link: var(--pw-blue-600); --pw-color-link-hover: var(--pw-blue-700); --pw-color-secondary: var(--pw-navy-800); /* secondary button text, headings accent */ --pw-color-chrome: var(--pw-navy-800); /* sidebar / top bar */ --pw-color-chrome-strong: var(--pw-navy-900); --pw-color-chrome-hover: var(--pw-navy-700); --pw-color-chrome-active: var(--pw-navy-600); --pw-color-chrome-text: #c3cde0; /* 10.8:1 on navy-900 */ --pw-color-chrome-text-muted: #8793ab; /* 5.6:1 on navy-900 */ --pw-color-chrome-text-strong: var(--pw-neutral-0); /* brand, hovered and current nav items */ --pw-color-chrome-divider: rgb(255 255 255 / 8%); --pw-color-topbar: rgb(255 255 255 / 92%); /* translucent sticky top bar */ --pw-color-success: var(--pw-green-700); --pw-color-success-subtle: var(--pw-green-50); --pw-color-success-border: var(--pw-green-200); --pw-color-warning: var(--pw-amber-700); --pw-color-warning-subtle: var(--pw-amber-50); --pw-color-warning-border: var(--pw-amber-200); --pw-color-warning-accent: var(--pw-amber-500); /* status dots, non-text indicators only */ --pw-color-danger: var(--pw-red-700); --pw-color-danger-hover: var(--pw-red-800); --pw-color-danger-subtle: var(--pw-red-50); --pw-color-danger-border: var(--pw-red-200); --pw-color-info: var(--pw-blue-700); --pw-color-info-subtle: var(--pw-blue-50); --pw-color-info-border: var(--pw-blue-100); --pw-color-neutral: var(--pw-neutral-700); --pw-color-neutral-subtle: var(--pw-neutral-100); --pw-color-positive: var(--pw-lime-700); /* health grade B */ --pw-color-positive-subtle: var(--pw-lime-50); --pw-color-highlight: var(--pw-gold-400); /* admin badge */ --pw-color-on-highlight: var(--pw-navy-900); --pw-color-favorite: var(--pw-gold-600); --pw-color-diagram-paper: var(--pw-neutral-0); /* BPMN canvas: white in every theme */ --pw-color-diagram-error: var(--pw-red-700); /* issue markers drawn on the paper */ --pw-color-diagram-warning: var(--pw-gold-600); --pw-color-overlay: rgb(255 255 255 / 85%); /* loading veil over content */ --pw-color-backdrop: rgb(15 26 51 / 45%); --pw-color-focus-ring: rgb(29 95 209 / 45%); /* ------------------------------------------------------------------ * 3. Spacing — 4 px base grid * ------------------------------------------------------------------ */ --pw-space-0: 0; --pw-space-1: 4px; --pw-space-2: 8px; --pw-space-3: 12px; --pw-space-4: 16px; --pw-space-5: 20px; --pw-space-6: 24px; --pw-space-8: 32px; --pw-space-10: 40px; --pw-space-12: 48px; --pw-space-16: 64px; /* ------------------------------------------------------------------ * 4. Radius * ------------------------------------------------------------------ */ --pw-radius-xs: 4px; /* focus outlines, tiny controls */ --pw-radius-sm: 6px; /* nav items, menu items, tree rows */ --pw-radius-md: 8px; /* buttons, inputs, alerts */ --pw-radius-lg: 12px; /* cards, dialogs, panels */ --pw-radius-full: 999px;/* pills, badges, avatars */ /* ------------------------------------------------------------------ * 5. Elevation * ------------------------------------------------------------------ */ --pw-shadow-0: none; --pw-shadow-1: 0 1px 2px rgb(15 26 51 / 6%), 0 1px 1px rgb(15 26 51 / 4%); /* cards at rest */ --pw-shadow-2: 0 1px 2px rgb(15 26 51 / 6%), 0 4px 16px rgb(15 26 51 / 6%); /* raised card, sticky */ --pw-shadow-3: 0 4px 8px rgb(15 26 51 / 8%), 0 12px 28px rgb(15 26 51 / 12%); /* menus, popovers */ --pw-shadow-4: 0 20px 60px rgb(15 26 51 / 30%); /* dialogs */ --pw-shadow-focus: 0 0 0 3px var(--pw-color-focus-ring); --pw-shadow-button: 0 1px 1px rgb(15 26 51 / 10%); /* filled buttons */ /* ------------------------------------------------------------------ * 6. Typography * ------------------------------------------------------------------ */ --pw-font-sans: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; --pw-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace; --pw-font-size-xs: 0.75rem; /* 12px badges, table headers, eyebrow */ --pw-font-size-sm: 0.8125rem; /* 13px meta, helper, captions */ --pw-font-size-md: 0.875rem; /* 14px body, controls, table cells */ --pw-font-size-lg: 1rem; /* 16px card title */ --pw-font-size-xl: 1.125rem; /* 18px section header */ --pw-font-size-2xl: 1.5rem; /* 24px page title */ --pw-font-size-3xl: 1.875rem; /* 30px metric value */ --pw-font-weight-regular: 400; --pw-font-weight-medium: 500; --pw-font-weight-semibold: 600; --pw-font-weight-bold: 700; --pw-line-height-tight: 1.2; --pw-line-height-snug: 1.35; --pw-line-height-normal: 1.5; --pw-letter-spacing-caps: 0.06em; --pw-letter-spacing-tight: -0.01em; /* ------------------------------------------------------------------ * 7. Layout * ------------------------------------------------------------------ */ --pw-sidebar-width: 248px; --pw-topbar-height: 56px; --pw-content-max: 1280px; /* standard pages */ --pw-content-narrow: 760px; /* forms, auth */ --pw-control-height: 36px; --pw-control-height-sm: 30px; /* ------------------------------------------------------------------ * 8. Z-index layers * ------------------------------------------------------------------ */ --pw-z-base: 0; --pw-z-raised: 10; /* modeller overlay, validation panel */ --pw-z-sticky: 100; /* sticky sidebar, table headers */ --pw-z-topbar: 200; --pw-z-dropdown: 300; /* menus, popovers */ --pw-z-overlay: 400; --pw-z-modal: 500; /* uses the top layer; kept for non-dialog overlays */ --pw-z-toast: 600; /* flash messages */ --pw-z-skip-link: 700; /* ------------------------------------------------------------------ * 9. Motion * ------------------------------------------------------------------ */ --pw-duration-fast: 120ms; --pw-duration-base: 180ms; --pw-ease-standard: cubic-bezier(0.2, 0, 0, 1); } /* ---------------------------------------------------------------------- * Dark theme — semantic re-mapping only (Sprint 9E). * Every token here must also exist in :root; nothing else may be themed. * ---------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --pw-color-canvas: var(--pw-night-900); --pw-color-surface: var(--pw-night-800); --pw-color-surface-subtle: var(--pw-night-750); --pw-color-surface-sunken: var(--pw-night-850); --pw-color-border: var(--pw-night-600); --pw-color-border-strong: var(--pw-night-500); --pw-color-text: var(--pw-night-100); --pw-color-text-secondary: var(--pw-night-200); --pw-color-text-muted: var(--pw-night-300); --pw-color-text-disabled: var(--pw-night-400); --pw-color-on-primary: var(--pw-navy-950); --pw-color-primary: var(--pw-sky-400); --pw-color-primary-hover: var(--pw-sky-200); --pw-color-primary-subtle: var(--pw-sky-900); --pw-color-primary-border: var(--pw-navy-600); --pw-color-link: var(--pw-sky-300); --pw-color-link-hover: var(--pw-sky-200); --pw-color-secondary: var(--pw-night-100); --pw-color-chrome: var(--pw-night-950); --pw-color-chrome-strong: var(--pw-night-950); --pw-color-chrome-hover: var(--pw-night-700); --pw-color-chrome-active: var(--pw-night-600); --pw-color-chrome-divider: var(--pw-night-700); --pw-color-topbar: rgb(20 27 42 / 92%); --pw-color-success: var(--pw-mint-400); --pw-color-success-subtle: var(--pw-mint-900); --pw-color-success-border: var(--pw-mint-800); --pw-color-warning: var(--pw-honey-400); --pw-color-warning-subtle: var(--pw-honey-900); --pw-color-warning-border: var(--pw-honey-800); --pw-color-warning-accent: var(--pw-honey-400); --pw-color-danger: var(--pw-coral-400); --pw-color-danger-hover: var(--pw-coral-300); --pw-color-danger-subtle: var(--pw-coral-900); --pw-color-danger-border: var(--pw-coral-800); --pw-color-info: var(--pw-sky-200); --pw-color-info-subtle: var(--pw-sky-900); --pw-color-info-border: var(--pw-navy-600); --pw-color-neutral: var(--pw-night-200); --pw-color-neutral-subtle: var(--pw-night-700); --pw-color-positive: var(--pw-leaf-400); --pw-color-positive-subtle: var(--pw-leaf-900); --pw-color-favorite: var(--pw-gold-500); --pw-color-overlay: rgb(12 18 32 / 85%); --pw-color-backdrop: rgb(0 0 0 / 60%); --pw-color-focus-ring: rgb(91 156 246 / 55%); --pw-shadow-1: 0 1px 2px rgb(0 0 0 / 40%); --pw-shadow-2: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 30%); --pw-shadow-3: 0 4px 8px rgb(0 0 0 / 40%), 0 12px 28px rgb(0 0 0 / 45%); --pw-shadow-4: 0 20px 60px rgb(0 0 0 / 60%); --pw-shadow-button: none; } @media (prefers-reduced-motion: reduce) { :root { --pw-duration-fast: 0ms; --pw-duration-base: 0ms; } }