/* ============================================================ Veluria Design Tokens — SINGLE SOURCE OF TRUTH Lifted from _bmad-output/planning-artifacts/ux-design-directions.html Every primitive token (color, type, spacing, radius, shadow, motion) is defined here ONCE. The client stylesheet `apps/client/styles/main.css` imports this file and layers structural/component tokens on top. No token value is redeclared in client code. Edit this file → `trunk serve` picks it up → UI reflects the change without touching any .rs or component CSS. Naming: - Canonical names are UNPREFIXED (`--surface-base`, `--accent-calm`, ...). - Legacy `--v-*` aliases are preserved at the bottom so the static HTML references in `ui_kits/` and `preview/` keep rendering. ============================================================ */ :root { /* ---------- SURFACES (light, default) ---------- */ --surface-base: #FAFAF8; /* app bg, warm near-white paper */ --surface-primary: #FFFFFF; /* cards, chrome */ --surface-secondary: #F4F4F2; /* rail, chat input bg */ --surface-tertiary: #EDEDEB; /* hover states on rail/ghost */ /* ---------- CONTENT (text) ---------- */ --content-primary: #1A1A1C; /* body + titles, near-black */ --content-secondary: #6B6B6E; /* subtitles, body de-emphasis */ --content-tertiary: #767679; /* timestamps, captions */ --content-disabled: #C4C4C6; /* disabled UI */ --content-inverse: #FFFFFF; /* text on dark/accent fills */ /* ---------- ACCENTS (emotional registers) ---------- */ /* Intelligence — KG provenance, memory aha, meeting prep */ --accent-intelligence: #8B7EB5; --accent-intelligence-subtle: #F1EEF6; /* Calm — default, routine, auto-approved, completion */ --accent-calm: #5BA87A; --accent-calm-subtle: #EFF6F1; /* Attentive — needs review, judgment, approaching deadlines */ --accent-attentive: #C49132; --accent-attentive-subtle: #FBF5EB; /* Decisive — high risk, kill switch, critical failures */ --accent-decisive: #C75450; --accent-decisive-subtle: #FBF0EF; --accent-decisive-vivid: #E53E3B; /* reserved for kill switch only */ /* ACCESSIBILITY variants — WCAG 2.1 AA compliant pigments for text or white-on-accent button backgrounds. The base accents (calm/attentive /intelligence) are too light on white to hit 4.5:1. Use these wherever an accent needs to carry TEXT ROLE (label foreground on white, or button bg paired with `--content-inverse` text) or a thin non-text mark on white (3px stripe) needing ≥3:1. See docs/architecture/design-tokens-a11y-audit.md for the per-surface matrix. */ --accent-calm-strong: #3A7A57; /* 5.12:1 vs white */ --accent-attentive-strong: #8B6914; /* 5.09:1 vs white */ --accent-intelligence-strong: #6B5F92; /* 5.71:1 vs white */ --accent-decisive-strong: #B34340; /* 5.54:1 vs white */ /* Semantic aliases (client uses these names for friction/success/destructive tiers) */ --accent-success: var(--accent-calm); --accent-success-subtle: var(--accent-calm-subtle); --accent-success-strong: var(--accent-calm-strong); --accent-destructive: var(--accent-decisive); --accent-destructive-subtle: var(--accent-decisive-subtle); --accent-destructive-strong: var(--accent-decisive-strong); /* ---------- INTERACTIVE ---------- */ --interactive-primary: #3D3D40; /* primary button bg; near-black */ --interactive-primary-hover: #2A2A2D; --interactive-secondary: transparent; --interactive-focus: rgba(139, 126, 181, 0.4); /* intelligence @ 40% */ --interactive-link: #5B6E8A; /* slate blue */ /* ---------- BORDERS ---------- */ --border-default: #E5E5E3; --border-strong: #D0D0CE; --border-card: #E5E5E3; --border-register: color-mix(in srgb, var(--accent-calm) 50%, transparent); /* ---------- OVERLAY / HIGHLIGHT ---------- */ --overlay-panel: rgba(0, 0, 0, 0.4); --highlight-search: rgba(139, 126, 181, 0.20); /* ============================================================ TYPE — CONFIRMED BRAND STACK (no substitution) UI: resolves to San Francisco (macOS), Segoe UI Variable (Windows), distribution default (Linux). Mono (Terminal, timestamps, CLI): SF Mono / Cascadia Code / JetBrains Mono. ============================================================ */ --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-family-mono: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", monospace; /* Weights — Large Title = 700, Title 1/2 = 600, badge/labels = 500, Body/Callout/Caption = 400 */ --font-weight-bold: 700; --font-weight-semibold: 600; --font-weight-medium: 500; --font-weight-regular: 400; /* Sizes (rem, 16px base — UX-DR32 WCAG 2.1 AA). Visual px targets: 28 / 20 / 17 / 15 / 13 / 11. */ --text-large-title: 1.75rem; /* 28px */ --text-title-1: 1.25rem; /* 20px */ --text-title-2: 1.0625rem; /* 17px */ --text-body: 0.9375rem; /* 15px */ --text-callout: 0.8125rem; /* 13px */ --text-caption: 0.6875rem; /* 11px */ /* Line-heights (rem). Visual px: 34/26/22/22/18/14. */ --line-height-large-title: 2.125rem; /* 34px */ --line-height-title-1: 1.625rem; /* 26px */ --line-height-title-2: 1.375rem; /* 22px */ --line-height-body: 1.375rem; /* 22px */ --line-height-callout: 1.125rem; /* 18px */ --line-height-caption: 0.875rem; /* 14px */ /* Shorthand (font: / ) — composed from above. */ --large-title: var(--font-weight-bold) var(--text-large-title)/1.2 var(--font-family-base); --title-1: var(--font-weight-semibold) var(--text-title-1)/1.3 var(--font-family-base); --title-2: var(--font-weight-semibold) var(--text-title-2)/1.35 var(--font-family-base); --body: var(--font-weight-regular) var(--text-body)/1.5 var(--font-family-base); --callout: var(--font-weight-regular) var(--text-callout)/1.4 var(--font-family-base); --caption: var(--font-weight-regular) var(--text-caption)/1.4 var(--font-family-base); /* ---------- SPACING (8px base grid, emitted as rem) ---------- */ --space-unit: 0.5rem; /* 8px — canonical base unit */ --space-2xs: 0.125rem; /* 2px */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ /* Component-scale conveniences (kept for preview HTMLs + DS contract). */ --card-padding: 1rem; /* 16px */ --card-gap: 0.5rem; /* 8px */ --card-radius: 0.75rem; /* 12px */ --rail-width: 3rem; /* 48px */ --input-height: 2.5rem; /* 40px */ /* ---------- RADII ---------- */ --radius-card: 0.5rem; /* 8px — buttons, inputs, toasts */ --radius-pill: 6.25rem; /* 100px */ --radius-full: 50%; /* ---------- SHADOWS (two levels only) ---------- */ --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02); --shadow-elevated: 0 4px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04); --shadow-floating: 0 4px 12px rgba(0, 0, 0, 0.08); /* modal/panel float */ /* ---------- MOTION ---------- */ --ease: cubic-bezier(0.2, 0.0, 0.2, 1); --duration-instant: 0.15s; /* micro-interactions, toast dismiss */ --duration-fast: 0.2s; /* button/input state transitions */ --duration-normal: 0.3s; /* panel slides, card expand */ --duration-pulse: 1.5s; /* ambient breathing/loading indicator */ } /* ============================================================ DARK MODE ------------------------------------------------------------ Dark values are defined ONCE here, triggered by either: (a) `[data-theme="dark"]` on — explicit opt-in, wins. (b) `@media (prefers-color-scheme: dark)` for OS auto-follow, scoped with `:root:not([data-theme="light"])` so a manual light toggle always overrides the OS preference. Legacy `--v-*` aliases automatically pick up these values because they resolve through `var(--surface-base)` etc. ============================================================ */ [data-theme="dark"], :root[data-theme="dark"] { --surface-base: #1A1A1C; --surface-primary: #232326; --surface-secondary: #2C2C2F; --surface-tertiary: #363639; --content-primary: #E8E8E6; --content-secondary: #9B9B9E; --content-tertiary: #8A8A8D; --content-disabled: #4A4A4D; --content-inverse: #1A1A1C; --accent-intelligence: #9B8EC5; --accent-intelligence-subtle: #26222E; --accent-calm: #6BBF8A; --accent-calm-subtle: #1E2E24; --accent-attentive: #D4A142; --accent-attentive-subtle: #2E2718; --accent-decisive: #D76460; --accent-decisive-subtle: #2E1C1B; --accent-decisive-vivid: #F04E4B; /* Accessibility-strong variants (dark mode). Light-mode strong = darker shade; in dark mode most accents already pass 4.5:1 against --surface-primary (#232326). Only decisive needed lightening to hit threshold. */ --accent-calm-strong: var(--accent-calm); /* 7.05:1 vs surface-primary */ --accent-attentive-strong: var(--accent-attentive); /* 6.70:1 */ --accent-intelligence-strong: var(--accent-intelligence); /* 5.28:1 */ --accent-decisive-strong: #E27C78; /* lifted from #D76460; 5.51:1 */ --interactive-primary: #E0E0DE; --interactive-primary-hover: #EDEDEB; --interactive-focus: rgba(155, 142, 197, 0.4); --interactive-link: #8BA0BF; --border-default: #363639; --border-strong: #4A4A4D; --border-card: #363639; --overlay-panel: rgba(0, 0, 0, 0.6); --highlight-search: rgba(155, 142, 197, 0.25); --shadow-card: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1); --shadow-elevated: 0 4px 12px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.15); --shadow-floating: 0 4px 12px rgba(0, 0, 0, 0.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-base: #1A1A1C; --surface-primary: #232326; --surface-secondary: #2C2C2F; --surface-tertiary: #363639; --content-primary: #E8E8E6; --content-secondary: #9B9B9E; --content-tertiary: #8A8A8D; --content-disabled: #4A4A4D; --content-inverse: #1A1A1C; --accent-intelligence: #9B8EC5; --accent-intelligence-subtle: #26222E; --accent-calm: #6BBF8A; --accent-calm-subtle: #1E2E24; --accent-attentive: #D4A142; --accent-attentive-subtle: #2E2718; --accent-decisive: #D76460; --accent-decisive-subtle: #2E1C1B; --accent-decisive-vivid: #F04E4B; --accent-calm-strong: var(--accent-calm); --accent-attentive-strong: var(--accent-attentive); --accent-intelligence-strong: var(--accent-intelligence); --accent-decisive-strong: #E27C78; --interactive-primary: #E0E0DE; --interactive-primary-hover: #EDEDEB; --interactive-focus: rgba(155, 142, 197, 0.4); --interactive-link: #8BA0BF; --border-default: #363639; --border-strong: #4A4A4D; --border-card: #363639; --overlay-panel: rgba(0, 0, 0, 0.6); --highlight-search: rgba(155, 142, 197, 0.25); --shadow-card: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1); --shadow-elevated: 0 4px 12px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.15); --shadow-floating: 0 4px 12px rgba(0, 0, 0, 0.4); } } /* ============================================================ LEGACY `--v-*` ALIASES — kept so `ui_kits/*.html` and `preview/*.html` continue to render without edits. All aliases resolve to the unprefixed canonical tokens above and therefore inherit dark-mode values automatically. New code must use the unprefixed names. ============================================================ */ :root { --v-surface-base: var(--surface-base); --v-surface-primary: var(--surface-primary); --v-surface-secondary: var(--surface-secondary); --v-surface-tertiary: var(--surface-tertiary); --v-content-primary: var(--content-primary); --v-content-secondary: var(--content-secondary); --v-content-tertiary: var(--content-tertiary); --v-accent-intelligence: var(--accent-intelligence); --v-accent-intelligence-subtle: var(--accent-intelligence-subtle); --v-accent-calm: var(--accent-calm); --v-accent-calm-subtle: var(--accent-calm-subtle); --v-accent-attentive: var(--accent-attentive); --v-accent-attentive-subtle: var(--accent-attentive-subtle); --v-accent-decisive: var(--accent-decisive); --v-accent-decisive-subtle: var(--accent-decisive-subtle); --v-accent-decisive-vivid: var(--accent-decisive-vivid); --v-interactive-primary: var(--interactive-primary); --v-interactive-link: var(--interactive-link); --v-border-default: var(--border-default); --v-font-family: var(--font-family-base); --v-font-mono: var(--font-family-mono); --v-large-title: var(--large-title); --v-title-1: var(--title-1); --v-title-2: var(--title-2); --v-body: var(--body); --v-callout: var(--callout); --v-caption: var(--caption); --v-space-unit: var(--space-unit); --v-card-padding: var(--card-padding); --v-card-gap: var(--card-gap); --v-card-radius: var(--card-radius); --v-rail-width: var(--rail-width); --v-input-height: var(--input-height); --v-shadow-card: var(--shadow-card); --v-shadow-elevated: var(--shadow-elevated); --v-ease: var(--ease); --v-dur-fast: var(--duration-instant); /* DS legacy: fast = 150ms = instant */ --v-dur-std: var(--duration-normal); /* DS legacy: std = panel-speed */ } /* ============================================================ SEMANTIC ELEMENTS ============================================================ */ .v-h1, h1.v { font: var(--large-title); color: var(--content-primary); letter-spacing: -0.01em; } .v-h2, h2.v { font: var(--title-1); color: var(--content-primary); } .v-h3, h3.v { font: var(--title-2); color: var(--content-primary); } .v-body { font: var(--body); color: var(--content-primary); } .v-secondary { font: var(--body); color: var(--content-secondary); } .v-callout { font: var(--callout); color: var(--content-secondary); } .v-caption { font: var(--caption); color: var(--content-tertiary); } .v-mono { font-family: var(--font-family-mono); font-feature-settings: "ss01"; } .v-label { font: var(--caption); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.4px; } .v-provenance { font: var(--callout); font-style: italic; color: var(--accent-intelligence); } /* ============================================================ RESET HELPERS ============================================================ */ .v-root { font: var(--body); color: var(--content-primary); background: var(--surface-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }