@verdify/tokens 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/LICENSE +12 -0
  2. package/README.md +155 -0
  3. package/dist/preset-adaptive.css +17 -0
  4. package/dist/preset.css +221 -0
  5. package/dist/tokens.css +232 -0
  6. package/dist/tokens.d.ts +370 -0
  7. package/dist/tokens.js +4546 -0
  8. package/dist/tokens.json +228 -0
  9. package/dist/tokens.mjs +235 -0
  10. package/package.json +48 -0
  11. package/src/tokens/border-width.tokens.json +8 -0
  12. package/src/tokens/breakpoint.tokens.json +9 -0
  13. package/src/tokens/color.tokens.json +275 -0
  14. package/src/tokens/component.tokens.json +65 -0
  15. package/src/tokens/container.tokens.json +9 -0
  16. package/src/tokens/focus.tokens.json +9 -0
  17. package/src/tokens/font.tokens.json +22 -0
  18. package/src/tokens/motion.tokens.json +35 -0
  19. package/src/tokens/opacity.tokens.json +17 -0
  20. package/src/tokens/print.tokens.json +120 -0
  21. package/src/tokens/radius.tokens.json +10 -0
  22. package/src/tokens/shadow.tokens.json +29 -0
  23. package/src/tokens/size.tokens.json +14 -0
  24. package/src/tokens/space.tokens.json +23 -0
  25. package/src/tokens/state.tokens.json +11 -0
  26. package/src/tokens/text.tokens.json +64 -0
  27. package/src/tokens/verdify-print.ase +0 -0
  28. package/src/tokens/z-index.tokens.json +10 -0
package/LICENSE ADDED
@@ -0,0 +1,12 @@
1
+ Copyright (c) 2026 Verdify.
2
+
3
+ All rights reserved.
4
+
5
+ This repository contains confidential and proprietary architecture documentation
6
+ for the Verdify ecosystem (Verdify, Spare, Veraq). It is shared with employees,
7
+ contractors, and authorized partners under the terms of their respective
8
+ agreements. No license — express or implied — is granted to copy, distribute,
9
+ or create derivative works outside those agreements.
10
+
11
+ Replace this file with the organization's chosen license before any public or
12
+ open-source release of any portion of the ecosystem.
package/README.md ADDED
@@ -0,0 +1,155 @@
1
+ # @verdify/tokens
2
+
3
+ Design tokens for Verdify — W3C DTCG sources translated to a Tailwind v4 preset, CSS
4
+ variables, ES/CJS modules, TypeScript types, and raw JSON.
5
+
6
+ This is a private GitHub Packages release. See the [BR-2 design spec][spec] and the
7
+ [BR-1 brand foundation][br1] for source-of-truth design decisions.
8
+
9
+ [spec]: https://github.com/mirinsim/verdify-docs/blob/main/specs/2026-05-18-br2-design-tokens-tailwind-design.md
10
+ [br1]: https://github.com/mirinsim/verdify-docs/blob/main/specs/2026-05-18-verdify-brand-foundation-design.md
11
+
12
+ ## Install
13
+
14
+ Add an `.npmrc` to your consuming repo:
15
+
16
+ ```ini
17
+ @verdify:registry=https://npm.pkg.github.com
18
+ //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
19
+ ```
20
+
21
+ Then install:
22
+
23
+ ```bash
24
+ pnpm add @verdify/tokens
25
+ ```
26
+
27
+ `GITHUB_TOKEN` must have `read:packages` scope.
28
+
29
+ ## Consumer flavors
30
+
31
+ ### (A) Tailwind v4 (recommended for BR-3 / BR-4)
32
+
33
+ ```css
34
+ /* app/globals.css */
35
+ @import "tailwindcss";
36
+ @import "@verdify/tokens/preset";
37
+
38
+ /* Optional: opt in to adaptive surface bands (BR-1 §7.4 time-of-day) */
39
+ @import "@verdify/tokens/preset-adaptive";
40
+ ```
41
+
42
+ Utilities derived automatically by Tailwind v4:
43
+
44
+ ```tsx
45
+ <button
46
+ className="bg-brand-brand text-neutral-mist-50 rounded-md text-h3 shadow-md"
47
+ style={{ transition: "background var(--transition-modal-duration) var(--transition-modal-easing)" }}
48
+ >
49
+ Verify
50
+ </button>
51
+ ```
52
+
53
+ Note: the named `motion.transition.*` composites emit as CSS custom properties
54
+ (`--transition-modal-duration`, `--transition-modal-easing`, etc.), not as Tailwind
55
+ utility classes. Use them via `var()` inside `style` or in a CSS rule, alongside
56
+ Tailwind's own `transition-*` utilities for property selection.
57
+
58
+ To activate adaptive bands, set the `data-adaptive` attribute on `<html>`:
59
+
60
+ ```html
61
+ <html data-adaptive="day"> <!-- or dawn / dusk / night -->
62
+ ```
63
+
64
+ ### (B) Plain CSS variables
65
+
66
+ ```css
67
+ @import "@verdify/tokens/css";
68
+
69
+ .signin-button {
70
+ background: var(--color-brand-brand);
71
+ color: var(--color-neutral-mist-50);
72
+ border-radius: var(--radius-md);
73
+ transition: background var(--motion-duration-base) var(--motion-easing-verdify);
74
+ }
75
+ ```
76
+
77
+ ### (C) TypeScript / JavaScript runtime
78
+
79
+ The ESM/CJS module exports flat named constants (one per leaf token), matching Style
80
+ Dictionary v4's `javascript/es6` and `javascript/module` formats:
81
+
82
+ ```ts
83
+ import { ColorBrandBrand, MotionEasingVerdify } from "@verdify/tokens";
84
+
85
+ const brandViolet = ColorBrandBrand; // "#7c5cff"
86
+ const fastEasing = MotionEasingVerdify; // "cubic-bezier(0.2, 0.8, 0.2, 1)"
87
+ ```
88
+
89
+ For tree-style access (e.g. design tools enumerating all tokens), import the raw JSON instead:
90
+
91
+ ```ts
92
+ import tokens from "@verdify/tokens/json"; // flat resolved JSON; keys like "color.brand.brand"
93
+ ```
94
+
95
+ ## Consumer guidance
96
+
97
+ ### Mobile inputs: avoid iOS auto-zoom
98
+
99
+ BR-1 §5.2 sets body text at 15px. iOS Safari auto-zooms focused inputs when their
100
+ font-size is below 16px, which is disorienting and changes layout. Apply this reset in
101
+ your global stylesheet (per BR-2 spec D-12):
102
+
103
+ ```css
104
+ input, select, textarea {
105
+ font-size: 16px;
106
+ }
107
+ ```
108
+
109
+ This overrides the inherited `text-body` size **only on form controls**; visual
110
+ rendering of body copy elsewhere is unaffected. Add it once at the consumer level —
111
+ BR-2 does not ship an alternative `text-body-input` role, by design.
112
+
113
+ ### Focus rings
114
+
115
+ Focus ring tokens (`focus-ring-width`, `focus-ring-color`, `focus-ring-offset`) are
116
+ emitted by the preset. Use them with:
117
+
118
+ ```css
119
+ *:focus-visible {
120
+ outline: var(--focus-ring-width) solid var(--focus-ring-color);
121
+ outline-offset: var(--focus-ring-offset);
122
+ }
123
+ ```
124
+
125
+ The ring color resolves to `semantic.signal` (`#4D9DFF`). Verified ≥3:1 contrast
126
+ against all surfaces in this package's contrast-validation test.
127
+
128
+ ### Adaptive system
129
+
130
+ The adaptive sub-preset reassigns `--color-surface-canvas` and `--color-text-primary`
131
+ per band. If your consumer uses OS-level light/dark independent of the time-of-day
132
+ adaptive layer, you must add your own `prefers-color-scheme` rules — this package
133
+ deliberately does not layer a separate light/dark abstraction (spec §2, decision §4
134
+ item 3).
135
+
136
+ ## Package contents
137
+
138
+ | Path | Purpose |
139
+ |---|---|
140
+ | `dist/preset.css` | Tailwind v4 `@theme` block (primary consumer artifact) |
141
+ | `dist/preset-adaptive.css` | Opt-in adaptive band selectors |
142
+ | `dist/tokens.css` | Plain CSS variables |
143
+ | `dist/tokens.mjs` | ESM exports |
144
+ | `dist/tokens.js` | CJS exports |
145
+ | `dist/tokens.d.ts` | TypeScript types |
146
+ | `dist/tokens.json` | Flat resolved JSON |
147
+ | `src/tokens/*.tokens.json` | DTCG source (re-exported for downstream tooling) |
148
+
149
+ ## Versioning
150
+
151
+ Independent semver from `verdify-brand`. See spec §6 for the MAJOR/MINOR/PATCH discipline.
152
+
153
+ ## License
154
+
155
+ UNLICENSED (proprietary). All rights reserved.
package/dist/preset-adaptive.css ADDED
@@ -0,0 +1,17 @@
1
+ /* @verdify/tokens — adaptive sub-preset (auto-generated; do not edit) */
2
+ [data-adaptive="dawn"] {
3
+ --color-surface-canvas: #f0eee9;
4
+ --color-text-primary: #2a3142;
5
+ }
6
+ [data-adaptive="day"] {
7
+ --color-surface-canvas: #f4f6fa;
8
+ --color-text-primary: #2a3142;
9
+ }
10
+ [data-adaptive="dusk"] {
11
+ --color-surface-canvas: #1a1a26;
12
+ --color-text-primary: #c8d0de;
13
+ }
14
+ [data-adaptive="night"] {
15
+ --color-surface-canvas: #060912;
16
+ --color-text-primary: #c8d0de;
17
+ }
package/dist/preset.css ADDED
@@ -0,0 +1,221 @@
1
+ /* @verdify/tokens — Tailwind v4 preset (auto-generated; do not edit) */
2
+ @theme {
3
+ --border-width-0: 0;
4
+ --border-width-2: 2px;
5
+ --border-width-4: 4px;
6
+ --border-width-default: 1px;
7
+ --breakpoint-sm: 40rem;
8
+ --breakpoint-md: 48rem;
9
+ --breakpoint-lg: 64rem;
10
+ --breakpoint-xl: 80rem;
11
+ --breakpoint-2xl: 96rem;
12
+ --color-brand-brand: #7c5cff;
13
+ --color-brand-brand-deep: #5b3ee8;
14
+ --color-neutral-obsidian-300: #c8d0de;
15
+ --color-neutral-obsidian-400: #8a95a8;
16
+ --color-neutral-obsidian-500: #4a5567;
17
+ --color-neutral-obsidian-600: #2a3142;
18
+ --color-neutral-obsidian-700: #1f2638;
19
+ --color-neutral-obsidian-800: #161b2a;
20
+ --color-neutral-obsidian-850: #0f1320;
21
+ --color-neutral-obsidian-900: #0b0f19;
22
+ --color-neutral-obsidian-950: #060912;
23
+ --color-neutral-mist-50: #fbfcfe;
24
+ --color-neutral-mist-100: #f4f6fa;
25
+ --color-neutral-mist-200: #e8ecf4;
26
+ --color-neutral-mist-300: #d6dce8;
27
+ --color-neutral-mist-400: #b0baca;
28
+ --color-neutral-mist-500: #8a95a8;
29
+ --color-neutral-mist-600: #4a5567;
30
+ --color-neutral-mist-800: #2a3142;
31
+ --color-neutral-mist-950: #0b0f19;
32
+ --color-semantic-verified: #00d17a;
33
+ --color-semantic-verified-strong: #007947;
34
+ --color-semantic-signal: #4d9dff;
35
+ --color-semantic-signal-strong: #346bad;
36
+ --color-semantic-caution: #f5a623;
37
+ --color-semantic-caution-strong: #8e6014;
38
+ --color-semantic-critical: #ff4d4d;
39
+ --color-semantic-critical-strong: #be3939;
40
+ --color-surface-canvas: #f4f6fa;
41
+ --color-surface-raised: #e8ecf4;
42
+ --color-surface-input: #d6dce8;
43
+ --color-surface-border: #b0baca;
44
+ --color-surface-border-muted: #8a95a8;
45
+ --color-text-primary: #0b0f19;
46
+ --color-text-secondary: #4a5567;
47
+ --color-text-muted: #8a95a8;
48
+ --color-text-disabled: #b0baca;
49
+ --color-text-inverse: #fbfcfe;
50
+ --color-text-on-brand: #fbfcfe;
51
+ --color-scrim-light: rgba(11, 15, 25, 0.5);
52
+ --color-scrim-dark: rgba(6, 9, 18, 0.7);
53
+ --color-action-primary-bg: #7c5cff;
54
+ --color-action-primary-fg: #fbfcfe;
55
+ --color-action-primary-border: #7c5cff;
56
+ --color-action-primary-bg-hover: #5b3ee8;
57
+ --color-action-primary-bg-active: #5b3ee8;
58
+ --color-action-secondary-bg: #e8ecf4;
59
+ --color-action-secondary-fg: #0b0f19;
60
+ --color-action-secondary-border: #b0baca;
61
+ --color-action-secondary-bg-hover: #d6dce8;
62
+ --color-action-ghost-fg: #0b0f19;
63
+ --color-action-ghost-bg-hover: #e8ecf4;
64
+ --color-action-destructive-bg: #ff4d4d;
65
+ --color-action-destructive-fg: #fbfcfe;
66
+ --color-action-destructive-border: #ff4d4d;
67
+ --color-status-verified-fg: #007947;
68
+ --color-status-verified-bg: #e8ecf4;
69
+ --color-status-verified-border: #007947;
70
+ --color-status-verified-accent: #00d17a;
71
+ --color-status-signal-fg: #346bad;
72
+ --color-status-signal-bg: #e8ecf4;
73
+ --color-status-signal-border: #346bad;
74
+ --color-status-signal-accent: #4d9dff;
75
+ --color-status-caution-fg: #8e6014;
76
+ --color-status-caution-bg: #e8ecf4;
77
+ --color-status-caution-border: #8e6014;
78
+ --color-status-caution-accent: #f5a623;
79
+ --color-status-critical-fg: #be3939;
80
+ --color-status-critical-bg: #e8ecf4;
81
+ --color-status-critical-border: #be3939;
82
+ --color-status-critical-accent: #ff4d4d;
83
+ --color-border-default: #b0baca;
84
+ --color-border-strong: #8a95a8;
85
+ --color-border-focus: #4d9dff;
86
+ --color-control-bg: #d6dce8;
87
+ --color-control-border: #b0baca;
88
+ --color-control-fg: #0b0f19;
89
+ --color-control-placeholder: #8a95a8;
90
+ --container-sm: 40rem;
91
+ --container-md: 48rem;
92
+ --container-lg: 64rem;
93
+ --container-xl: 80rem;
94
+ --container-2xl: 96rem;
95
+ --focus-ring-width: 2px;
96
+ --focus-ring-color: #4d9dff;
97
+ --focus-ring-offset: 2px;
98
+ --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
99
+ --font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
100
+ --font-weight-regular: 400;
101
+ --font-weight-medium: 500;
102
+ --font-weight-semibold: 600;
103
+ --font-weight-bold: 700;
104
+ --motion-duration-instant: 0ms;
105
+ --motion-duration-fast: 120ms;
106
+ --motion-duration-base: 200ms;
107
+ --motion-duration-deliberate: 350ms;
108
+ --motion-duration-ambient: 1200ms;
109
+ --motion-easing-verdify: cubic-bezier(0.2, 0.8, 0.2, 1);
110
+ --motion-easing-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);
111
+ --motion-easing-ambient: cubic-bezier(0.4, 0, 0.6, 1);
112
+ --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
113
+ --transition-micro-duration: 120ms;
114
+ --transition-micro-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
115
+ --transition-layout-duration: 200ms;
116
+ --transition-layout-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
117
+ --transition-modal-duration: 350ms;
118
+ --transition-modal-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
119
+ --transition-ambient-duration: 1200ms;
120
+ --transition-ambient-easing: cubic-bezier(0.4, 0, 0.6, 1);
121
+ --opacity-0: 0;
122
+ --opacity-5: 0.05;
123
+ --opacity-10: 0.1;
124
+ --opacity-20: 0.2;
125
+ --opacity-30: 0.3;
126
+ --opacity-40: 0.4;
127
+ --opacity-50: 0.5;
128
+ --opacity-60: 0.6;
129
+ --opacity-70: 0.7;
130
+ --opacity-80: 0.8;
131
+ --opacity-90: 0.9;
132
+ --opacity-95: 0.95;
133
+ --opacity-100: 1;
134
+ --radius-none: 0;
135
+ --radius-sm: 0.25rem;
136
+ --radius-md: 0.5rem;
137
+ --radius-lg: 0.75rem;
138
+ --radius-xl: 1rem;
139
+ --radius-full: 9999px;
140
+ --shadow-none: none;
141
+ --shadow-sm: 0 1px 2px 0 rgb(11 15 25 / 0.05);
142
+ --shadow-md: 0 4px 6px -1px rgb(11 15 25 / 0.08), 0 2px 4px -2px rgb(11 15 25 / 0.08);
143
+ --shadow-lg: 0 10px 15px -3px rgb(11 15 25 / 0.10), 0 4px 6px -4px rgb(11 15 25 / 0.10);
144
+ --shadow-xl: 0 20px 25px -5px rgb(11 15 25 / 0.10), 0 8px 10px -6px rgb(11 15 25 / 0.10);
145
+ --size-icon-sm: 1rem;
146
+ --size-icon-md: 1.25rem;
147
+ --size-icon-lg: 1.5rem;
148
+ --size-icon-xl: 2rem;
149
+ --size-target-mobile: 2.75rem;
150
+ --size-target-desktop: 2.5rem;
151
+ --space-0: 0;
152
+ --space-1: 0.25rem;
153
+ --space-2: 0.5rem;
154
+ --space-3: 0.75rem;
155
+ --space-4: 1rem;
156
+ --space-5: 1.25rem;
157
+ --space-6: 1.5rem;
158
+ --space-7: 1.75rem;
159
+ --space-8: 2rem;
160
+ --space-9: 2.25rem;
161
+ --space-10: 2.5rem;
162
+ --space-11: 2.75rem;
163
+ --space-12: 3rem;
164
+ --space-14: 3.5rem;
165
+ --space-16: 4rem;
166
+ --space-20: 5rem;
167
+ --space-24: 6rem;
168
+ --space-28: 7rem;
169
+ --space-32: 8rem;
170
+ --state-opacity-hover: 0.08;
171
+ --state-opacity-pressed: 0.12;
172
+ --state-opacity-focus: 0.12;
173
+ --state-opacity-disabled: 0.38;
174
+ --state-opacity-dragged: 0.16;
175
+ --text-display: 3.5rem;
176
+ --text-display--line-height: 1.05;
177
+ --text-display--letter-spacing: -0.025em;
178
+ --text-display--font-weight: 600;
179
+ --text-h1: 2.25rem;
180
+ --text-h1--line-height: 1.15;
181
+ --text-h1--letter-spacing: -0.022em;
182
+ --text-h1--font-weight: 600;
183
+ --text-h2: 1.625rem;
184
+ --text-h2--line-height: 1.25;
185
+ --text-h2--letter-spacing: -0.018em;
186
+ --text-h2--font-weight: 500;
187
+ --text-h3: 1.25rem;
188
+ --text-h3--line-height: 1.35;
189
+ --text-h3--letter-spacing: -0.015em;
190
+ --text-h3--font-weight: 500;
191
+ --text-body-lg: 1.0625rem;
192
+ --text-body-lg--line-height: 1.55;
193
+ --text-body-lg--letter-spacing: 0;
194
+ --text-body-lg--font-weight: 400;
195
+ --text-body: 0.9375rem;
196
+ --text-body--line-height: 1.55;
197
+ --text-body--letter-spacing: 0;
198
+ --text-body--font-weight: 400;
199
+ --text-caption: 0.75rem;
200
+ --text-caption--line-height: 1.45;
201
+ --text-caption--letter-spacing: 0.005em;
202
+ --text-caption--font-weight: 400;
203
+ --text-label: 0.6875rem;
204
+ --text-label--line-height: 1.4;
205
+ --text-label--letter-spacing: 0.18em;
206
+ --text-label--font-weight: 500;
207
+ --text-mono-sm: 0.75rem;
208
+ --text-mono-sm--line-height: 1.5;
209
+ --text-mono-sm--letter-spacing: 0;
210
+ --text-mono-sm--font-weight: 400;
211
+ --text-mono: 0.875rem;
212
+ --text-mono--line-height: 1.55;
213
+ --text-mono--letter-spacing: 0;
214
+ --text-mono--font-weight: 400;
215
+ --z-index-base: 0;
216
+ --z-index-dropdown: 1000;
217
+ --z-index-sticky: 1100;
218
+ --z-index-modal: 1200;
219
+ --z-index-popover: 1300;
220
+ --z-index-toast: 1400;
221
+ }
package/dist/tokens.css ADDED
@@ -0,0 +1,232 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --border-width-0: 0; /** No border */
7
+ --border-width-2: 2px; /** Emphasized border width */
8
+ --border-width-4: 4px; /** Heavy border width — reserved for focus indicators or active states */
9
+ --border-width-default: 1px; /** Default border width */
10
+ --breakpoint-sm: 40rem; /** Small breakpoint (640px) — landscape phones */
11
+ --breakpoint-md: 48rem; /** Medium breakpoint (768px) — tablets portrait */
12
+ --breakpoint-lg: 64rem; /** Large breakpoint (1024px) — tablets landscape, small laptops */
13
+ --breakpoint-xl: 80rem; /** Extra large breakpoint (1280px) — desktops */
14
+ --breakpoint-2xl: 96rem; /** 2X large breakpoint (1536px) — wide desktops */
15
+ --color-brand-brand: #7c5cff; /** Sovereign Violet — the single brand anchor. Identity color; the logo seam and primary brand moments. Sits outside the traffic-light status register. */
16
+ --color-brand-brand-deep: #5b3ee8; /** Companion to brand.brand — used on light surfaces where #7C5CFF fails WCAG 2.2 non-text contrast (>=3:1). Luminance shift only. */
17
+ --color-neutral-obsidian-300: #c8d0de; /** Primary text on dark */
18
+ --color-neutral-obsidian-400: #8a95a8; /** Secondary text */
19
+ --color-neutral-obsidian-500: #4a5567; /** Muted text */
20
+ --color-neutral-obsidian-600: #2a3142; /** Muted border */
21
+ --color-neutral-obsidian-700: #1f2638; /** Border / divider */
22
+ --color-neutral-obsidian-800: #161b2a; /** Input / well */
23
+ --color-neutral-obsidian-850: #0f1320; /** Raised surface · cards */
24
+ --color-neutral-obsidian-900: #0b0f19; /** Default dark canvas */
25
+ --color-neutral-obsidian-950: #060912; /** Deepest backdrop · night-band canvas */
26
+ --color-neutral-mist-50: #fbfcfe; /** Deepest light backdrop */
27
+ --color-neutral-mist-100: #f4f6fa; /** Default light canvas */
28
+ --color-neutral-mist-200: #e8ecf4; /** Raised surface · cards */
29
+ --color-neutral-mist-300: #d6dce8; /** Input / well */
30
+ --color-neutral-mist-400: #b0baca; /** Border / divider */
31
+ --color-neutral-mist-500: #8a95a8; /** Muted (shared with obsidian.400) */
32
+ --color-neutral-mist-600: #4a5567; /** Secondary text (shared with obsidian.500) */
33
+ --color-neutral-mist-800: #2a3142; /** Strong text */
34
+ --color-neutral-mist-950: #0b0f19; /** Highest-contrast text (shared with obsidian.900) */
35
+ --color-semantic-verified: #00d17a; /** Trust / success / verification passed — bright decorative accent (icons/fills). Fails WCAG AA as text on light surfaces; use verified-strong for readable fg/border. */
36
+ --color-semantic-verified-strong: #007947; /** Verified, darkened to WCAG AA — in-hue luminance shift of verified; 4.64:1 on Mist-200 (#E8ECF4). Status chip foreground/border. */
37
+ --color-semantic-signal: #4d9dff; /** Info / hyperlinks / neutral interactive accent — bright decorative accent. Fails WCAG AA as text on light surfaces; use signal-strong for readable fg/border. */
38
+ --color-semantic-signal-strong: #346bad; /** Signal, darkened to WCAG AA — in-hue luminance shift of signal; 4.60:1 on Mist-200 (#E8ECF4). Status chip foreground/border. */
39
+ --color-semantic-caution: #f5a623; /** Warning / pending / verification in progress — bright decorative accent. Fails WCAG AA as text on light surfaces; use caution-strong for readable fg/border. */
40
+ --color-semantic-caution-strong: #8e6014; /** Caution, darkened to WCAG AA — in-hue luminance shift of caution; 4.63:1 on Mist-200 (#E8ECF4). Status chip foreground/border. */
41
+ --color-semantic-critical: #ff4d4d; /** Error / verification failure / destructive action — bright decorative accent. Fails WCAG AA as text on light surfaces; use critical-strong for readable fg/border. */
42
+ --color-semantic-critical-strong: #be3939; /** Critical, darkened to WCAG AA — in-hue luminance shift of critical; 4.63:1 on Mist-200 (#E8ECF4). Status chip foreground/border. */
43
+ --color-adaptive-dawn-surface: #f0eee9; /** Adaptive dawn band surface (05:00-09:00) */
44
+ --color-adaptive-dawn-text: #2a3142; /** Adaptive dawn band primary text (05:00-09:00) */
45
+ --color-adaptive-day-surface: #f4f6fa; /** Adaptive day band surface (09:00-17:00) */
46
+ --color-adaptive-day-text: #2a3142; /** Adaptive day band primary text (09:00-17:00) */
47
+ --color-adaptive-dusk-surface: #1a1a26; /** Adaptive dusk band surface (17:00-21:00) */
48
+ --color-adaptive-dusk-text: #c8d0de; /** Adaptive dusk band primary text (17:00-21:00) */
49
+ --color-adaptive-night-surface: #060912; /** Adaptive night band surface (21:00-05:00) */
50
+ --color-adaptive-night-text: #c8d0de; /** Adaptive night band primary text (21:00-05:00) */
51
+ --color-surface-canvas: #f4f6fa; /** Default canvas (light); reassigned per adaptive band at runtime. Per BR-1 §4.2 'Default light canvas'. */
52
+ --color-surface-raised: #e8ecf4; /** Raised surface — cards. Per BR-1 §4.2 'Raised surface · cards'. */
53
+ --color-surface-input: #d6dce8; /** Input / well. Per BR-1 §4.2 'Input / well'. */
54
+ --color-surface-border: #b0baca; /** Border / divider. Per BR-1 §4.2 'Border / divider'. */
55
+ --color-surface-border-muted: #8a95a8; /** Muted border — implicit in Mist scale (mid-range collision with Obsidian 600). Per BR-1 §4.2. */
56
+ --color-text-primary: #0b0f19; /** Primary text on canvas; reassigned per adaptive band. Per BR-1 §4.2 'Highest-contrast text'. */
57
+ --color-text-secondary: #4a5567; /** Secondary text role; aliases to mist.600, whose hex (#4A5567) is shared with obsidian.500 per BR-1 §4.2 mid-range collision. */
58
+ --color-text-muted: #8a95a8; /** Muted text — shared with obsidian.400 per BR-1 §4.2 mid-range collision. Contrast on surface.canvas is ~2.8:1 — intentionally below WCAG AA for body text; use only for de-emphasised auxiliary text where ≥3:1 (UI components) is the relevant bar. */
59
+ --color-text-disabled: #b0baca; /** Disabled text — low-contrast, deliberate. Aliases mist.400; downstream consumers may alternatively compose text.primary with state.opacity.disabled (0.38) for a different visual register. */
60
+ --color-text-inverse: #fbfcfe; /** Text on dark surfaces (e.g. obsidian backdrop, dark scrim). Aliases mist.50 — the lightest neutral. Distinct from on-brand: inverse is for neutral-dark contexts; on-brand is reserved for brand backgrounds. */
61
+ --color-text-on-brand: #fbfcfe; /** Text on brand backgrounds (e.g. CTA buttons). Constant per brand discipline. */
62
+ --color-scrim-light: rgba(11, 15, 25, 0.5); /** Modal/sheet backdrop on light surfaces — obsidian-900 at 50% opacity (per BR-2 spec §4). */
63
+ --color-scrim-dark: rgba(6, 9, 18, 0.7); /** Modal/sheet backdrop on dark surfaces — obsidian-950 at 70% opacity for stronger isolation. */
64
+ --color-action-primary-bg: #7c5cff; /** Primary action background — Sovereign Violet. The single high-emphasis CTA per surface. */
65
+ --color-action-primary-fg: #fbfcfe; /** Text/icon on a primary action. */
66
+ --color-action-primary-border: #7c5cff; /** Primary action border — matches bg. */
67
+ --color-action-primary-bg-hover: #5b3ee8; /** Primary action hover — deep companion. */
68
+ --color-action-primary-bg-active: #5b3ee8; /** Primary action pressed/active. */
69
+ --color-action-secondary-bg: #e8ecf4; /** Secondary action background — neutral raised surface. */
70
+ --color-action-secondary-fg: #0b0f19; /** Text/icon on a secondary action. */
71
+ --color-action-secondary-border: #b0baca; /** Secondary action border. */
72
+ --color-action-secondary-bg-hover: #d6dce8; /** Secondary action hover. */
73
+ --color-action-ghost-fg: #0b0f19; /** Ghost action text/icon — no fill until hover. */
74
+ --color-action-ghost-bg-hover: #e8ecf4; /** Ghost action hover fill. */
75
+ --color-action-destructive-bg: #ff4d4d; /** Destructive action background — Critical. A status color used for a destructive control; never the brand. */
76
+ --color-action-destructive-fg: #fbfcfe; /** Text/icon on a destructive action. */
77
+ --color-action-destructive-border: #ff4d4d; /** Destructive action border. */
78
+ --color-status-verified-fg: #007947; /** Verified status foreground — Verified Green darkened to WCAG AA (#007947, ≥4.5:1 on the chip bg). The in-product success state; never the brand. */
79
+ --color-status-verified-bg: #e8ecf4; /** Verified status chip background — neutral; color carried by fg/border (restraint over volume). */
80
+ --color-status-verified-border: #007947; /** Verified status border — AA-dark shade (≥3:1 non-text). */
81
+ --color-status-verified-accent: #00d17a; /** Verified bright decorative accent (#00D17A) — for icons/fills where contrast is not a text/border requirement. */
82
+ --color-status-signal-fg: #346bad; /** Informational status foreground — Signal darkened to WCAG AA (#346BAD, ≥4.5:1 on the chip bg). */
83
+ --color-status-signal-bg: #e8ecf4; /** Informational status chip background — neutral. */
84
+ --color-status-signal-border: #346bad; /** Informational status border — AA-dark shade (≥3:1 non-text). */
85
+ --color-status-signal-accent: #4d9dff; /** Signal bright decorative accent (#4D9DFF) — for icons/fills. */
86
+ --color-status-caution-fg: #8e6014; /** Caution status foreground — Caution darkened to WCAG AA (#8E6014, ≥4.5:1 on the chip bg); pending / in-progress. */
87
+ --color-status-caution-bg: #e8ecf4; /** Caution status chip background — neutral. */
88
+ --color-status-caution-border: #8e6014; /** Caution status border — AA-dark shade (≥3:1 non-text). */
89
+ --color-status-caution-accent: #f5a623; /** Caution bright decorative accent (#F5A623) — for icons/fills. */
90
+ --color-status-critical-fg: #be3939; /** Critical status foreground — Critical darkened to WCAG AA (#BE3939, ≥4.5:1 on the chip bg); error / failure. */
91
+ --color-status-critical-bg: #e8ecf4; /** Critical status chip background — neutral. */
92
+ --color-status-critical-border: #be3939; /** Critical status border — AA-dark shade (≥3:1 non-text). */
93
+ --color-status-critical-accent: #ff4d4d; /** Critical bright decorative accent (#FF4D4D) — for icons/fills. */
94
+ --color-border-default: #b0baca; /** Default component border — divider weight. */
95
+ --color-border-strong: #8a95a8; /** Higher-contrast component border for emphasis. */
96
+ --color-border-focus: #4d9dff; /** Focused-input border color — matches the focus ring (single source: focus.ring.color). */
97
+ --color-control-bg: #d6dce8; /** Form control background — input / well. */
98
+ --color-control-border: #b0baca; /** Form control border. */
99
+ --color-control-fg: #0b0f19; /** Form control text/value. */
100
+ --color-control-placeholder: #8a95a8; /** Form control placeholder text — de-emphasised. */
101
+ --container-sm: 40rem; /** Container max-width at sm breakpoint */
102
+ --container-md: 48rem; /** Container max-width at md breakpoint */
103
+ --container-lg: 64rem; /** Container max-width at lg breakpoint */
104
+ --container-xl: 80rem; /** Container max-width at xl breakpoint */
105
+ --container-2xl: 96rem; /** Container max-width at 2xl breakpoint */
106
+ --focus-ring-width: 2px; /** Focus ring width. Per WCAG 2.4.7. */
107
+ --focus-ring-color: #4d9dff; /** Focus ring color — semantic.signal (#4D9DFF). Contrast ≥3:1 verified in Task 7 (contrast-validation). */
108
+ --focus-ring-offset: 2px; /** Focus ring offset (gap between target and ring). */
109
+ --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /** Primary UI and reading family — Inter Variable per BR-1 §5.1. System fallbacks listed in priority order. */
110
+ --font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /** Technical family for IDs, hashes, code, timestamps — JetBrains Mono Variable per BR-1 §5.1. */
111
+ --font-weight-regular: 400; /** Body / paragraph weight */
112
+ --font-weight-medium: 500; /** H2/H3, labels, wordmark */
113
+ --font-weight-semibold: 600; /** Display / H1 */
114
+ --font-weight-bold: 700; /** Reserved for rare emphasis; not used in default scale */
115
+ --motion-duration-instant: 0ms; /** State changes — selection, focus state (no animation). Per BR-1 §9.1. */
116
+ --motion-duration-fast: 120ms; /** Hover, focus rings, button presses. Per BR-1 §9.1. */
117
+ --motion-duration-base: 200ms; /** Most UI transitions — panels, tooltips. Per BR-1 §9.1. */
118
+ --motion-duration-deliberate: 350ms; /** Verification moments, modals, the check. Per BR-1 §9.1. */
119
+ --motion-duration-ambient: 1200ms; /** Band transitions, time-of-day, hero entrances. Per BR-1 §9.1. NOT for UI feedback. */
120
+ --motion-easing-verdify: cubic-bezier(0.2, 0.8, 0.2, 1); /** Default — natural, slightly snappy. Per BR-1 §9.2. */
121
+ --motion-easing-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1); /** The check moment only — slight overshoot. Per BR-1 §9.2. */
122
+ --motion-easing-ambient: cubic-bezier(0.4, 0, 0.6, 1); /** Long, gentle — adaptive bands. Per BR-1 §9.2. */
123
+ --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1); /** Things leaving feel decisive. Per BR-1 §9.2. */
124
+ --motion-transition-micro-duration: 120ms; /** Hover/press feedback duration. Per BR-2 spec D-11. */
125
+ --motion-transition-micro-easing: cubic-bezier(0.2, 0.8, 0.2, 1); /** Hover/press feedback easing. */
126
+ --motion-transition-layout-duration: 200ms; /** Most UI layout transitions duration. */
127
+ --motion-transition-layout-easing: cubic-bezier(0.2, 0.8, 0.2, 1); /** Most UI layout transitions easing. */
128
+ --motion-transition-modal-duration: 350ms; /** Modal/sheet entry/exit duration. Per BR-1 §9.3 — restraint (no ease-emphasis; that is reserved for the check). */
129
+ --motion-transition-modal-easing: cubic-bezier(0.2, 0.8, 0.2, 1); /** Modal/sheet entry/exit easing. */
130
+ --motion-transition-ambient-duration: 1200ms; /** Adaptive band transitions duration. NOT for primary UI feedback. */
131
+ --motion-transition-ambient-easing: cubic-bezier(0.4, 0, 0.6, 1); /** Adaptive band transitions easing. */
132
+ --opacity-0: 0; /** Fully transparent */
133
+ --opacity-5: 0.05; /** Opacity 5% */
134
+ --opacity-10: 0.1; /** Opacity 10% */
135
+ --opacity-20: 0.2; /** Opacity 20% */
136
+ --opacity-30: 0.3; /** Opacity 30% */
137
+ --opacity-40: 0.4; /** Opacity 40% */
138
+ --opacity-50: 0.5; /** Opacity 50% */
139
+ --opacity-60: 0.6; /** Opacity 60% */
140
+ --opacity-70: 0.7; /** Opacity 70% */
141
+ --opacity-80: 0.8; /** Opacity 80% */
142
+ --opacity-90: 0.9; /** Opacity 90% */
143
+ --opacity-95: 0.95; /** Opacity 95% */
144
+ --opacity-100: 1; /** Fully opaque */
145
+ --radius-none: 0; /** No border radius — squared corners */
146
+ --radius-sm: 0.25rem; /** Small radius (4px) — inputs, chips */
147
+ --radius-md: 0.5rem; /** Medium radius (8px) — buttons, cards */
148
+ --radius-lg: 0.75rem; /** Large radius (12px) — modals, sheets */
149
+ --radius-xl: 1rem; /** Extra large radius (16px) — feature surfaces */
150
+ --radius-full: 9999px; /** Full radius — pills, circular avatars */
151
+ --shadow-none: none; /** No shadow */
152
+ --shadow-sm: 0 1px 2px 0 rgb(11 15 25 / 0.05); /** Subtle elevation — inputs, low cards */
153
+ --shadow-md: 0 4px 6px -1px rgb(11 15 25 / 0.08), 0 2px 4px -2px rgb(11 15 25 / 0.08); /** Standard elevation — raised cards, dropdowns */
154
+ --shadow-lg: 0 10px 15px -3px rgb(11 15 25 / 0.10), 0 4px 6px -4px rgb(11 15 25 / 0.10); /** Strong elevation — popovers, sheets */
155
+ --shadow-xl: 0 20px 25px -5px rgb(11 15 25 / 0.10), 0 8px 10px -6px rgb(11 15 25 / 0.10); /** Hero elevation — modals, feature emphasis. Max opacity (brand-voice ceiling). */
156
+ --size-icon-sm: 1rem; /** Small icon (16px) — inline, captions */
157
+ --size-icon-md: 1.25rem; /** Medium icon (20px) — buttons, inline body */
158
+ --size-icon-lg: 1.5rem; /** Large icon (24px) — primary actions, headers */
159
+ --size-icon-xl: 2rem; /** Extra large icon (32px) — feature emphasis */
160
+ --size-target-mobile: 2.75rem; /** Mobile minimum tap target (44px). Per WCAG 2.5.5 and Apple HIG. */
161
+ --size-target-desktop: 2.5rem; /** Desktop minimum click target (40px). Per Material Design. */
162
+ --space-0: 0; /** Spacing step 0 (0px) */
163
+ --space-1: 0.25rem; /** Spacing step 1 (4px) */
164
+ --space-2: 0.5rem; /** Spacing step 2 (8px) */
165
+ --space-3: 0.75rem; /** Spacing step 3 (12px) */
166
+ --space-4: 1rem; /** Spacing step 4 (16px) — base unit */
167
+ --space-5: 1.25rem; /** Spacing step 5 (20px) */
168
+ --space-6: 1.5rem; /** Spacing step 6 (24px) */
169
+ --space-7: 1.75rem; /** Spacing step 7 (28px) */
170
+ --space-8: 2rem; /** Spacing step 8 (32px) */
171
+ --space-9: 2.25rem; /** Spacing step 9 (36px) */
172
+ --space-10: 2.5rem; /** Spacing step 10 (40px) */
173
+ --space-11: 2.75rem; /** Spacing step 11 (44px) */
174
+ --space-12: 3rem; /** Spacing step 12 (48px) */
175
+ --space-14: 3.5rem; /** Spacing step 14 (56px) */
176
+ --space-16: 4rem; /** Spacing step 16 (64px) */
177
+ --space-20: 5rem; /** Spacing step 20 (80px) */
178
+ --space-24: 6rem; /** Spacing step 24 (96px) */
179
+ --space-28: 7rem; /** Spacing step 28 (112px) */
180
+ --space-32: 8rem; /** Spacing step 32 (128px) */
181
+ --state-opacity-hover: 0.08; /** Hover state-layer opacity overlay. Material-derived; per BR-2 spec D-10. */
182
+ --state-opacity-pressed: 0.12; /** Pressed/active state-layer opacity overlay. */
183
+ --state-opacity-focus: 0.12; /** Focused state-layer opacity overlay (in addition to focus ring). */
184
+ --state-opacity-disabled: 0.38; /** Disabled state opacity — applied to text or icon, not as overlay. */
185
+ --state-opacity-dragged: 0.16; /** Dragged state-layer opacity overlay. */
186
+ --text-display-size: 3.5rem; /** Display heading size (56px); per BR-1 §5.2 */
187
+ --text-display-line-height: 1.05; /** Display heading line-height */
188
+ --text-display-letter-spacing: -0.025em; /** Display heading tracking */
189
+ --text-display-weight: 600; /** Display heading weight (semibold) */
190
+ --text-h1-size: 2.25rem; /** H1 size (36px); per BR-1 §5.2 */
191
+ --text-h1-line-height: 1.15; /** H1 line-height */
192
+ --text-h1-letter-spacing: -0.022em; /** H1 tracking */
193
+ --text-h1-weight: 600; /** H1 weight (semibold) */
194
+ --text-h2-size: 1.625rem; /** H2 size (26px); per BR-1 §5.2 */
195
+ --text-h2-line-height: 1.25; /** H2 line-height */
196
+ --text-h2-letter-spacing: -0.018em; /** H2 tracking */
197
+ --text-h2-weight: 500; /** H2 weight (medium) */
198
+ --text-h3-size: 1.25rem; /** H3 size (20px); per BR-1 §5.2 */
199
+ --text-h3-line-height: 1.35; /** H3 line-height */
200
+ --text-h3-letter-spacing: -0.015em; /** H3 tracking */
201
+ --text-h3-weight: 500; /** H3 weight (medium) */
202
+ --text-body-lg-size: 1.0625rem; /** Body large size (17px); per BR-1 §5.2 */
203
+ --text-body-lg-line-height: 1.55; /** Body large line-height */
204
+ --text-body-lg-letter-spacing: 0; /** Body large tracking (none) */
205
+ --text-body-lg-weight: 400; /** Body large weight (regular) */
206
+ --text-body-size: 0.9375rem; /** Body size (15px); per BR-1 §5.2. Consumers MUST apply a 16px reset on inputs to avoid iOS auto-zoom (per spec D-12). */
207
+ --text-body-line-height: 1.55; /** Body line-height */
208
+ --text-body-letter-spacing: 0; /** Body tracking (none) */
209
+ --text-body-weight: 400; /** Body weight (regular) */
210
+ --text-caption-size: 0.75rem; /** Caption size (12px); per BR-1 §5.2 */
211
+ --text-caption-line-height: 1.45; /** Caption line-height */
212
+ --text-caption-letter-spacing: 0.005em; /** Caption tracking */
213
+ --text-caption-weight: 400; /** Caption weight (regular) */
214
+ --text-label-size: 0.6875rem; /** Label size (11px); UPPERCASE per BR-1 §5.4 */
215
+ --text-label-line-height: 1.4; /** Label line-height */
216
+ --text-label-letter-spacing: 0.18em; /** Label tracking (wide; for eyebrows/labels) */
217
+ --text-label-weight: 500; /** Label weight (medium) */
218
+ --text-mono-sm-size: 0.75rem; /** Mono small size (12px); per BR-1 §5.2 */
219
+ --text-mono-sm-line-height: 1.5; /** Mono small line-height */
220
+ --text-mono-sm-letter-spacing: 0; /** Mono small tracking (none) */
221
+ --text-mono-sm-weight: 400; /** Mono small weight (regular) */
222
+ --text-mono-size: 0.875rem; /** Mono size (14px); per BR-1 §5.2 */
223
+ --text-mono-line-height: 1.55; /** Mono line-height */
224
+ --text-mono-letter-spacing: 0; /** Mono tracking (none) */
225
+ --text-mono-weight: 400; /** Mono weight (regular) */
226
+ --z-index-base: 0; /** Base stacking — flat content */
227
+ --z-index-dropdown: 1000; /** Dropdown menus, comboboxes */
228
+ --z-index-sticky: 1100; /** Sticky headers, fixed bars */
229
+ --z-index-modal: 1200; /** Modal dialogs, sheets */
230
+ --z-index-popover: 1300; /** Popovers, tooltips above modals */
231
+ --z-index-toast: 1400; /** Toasts, notifications — highest */
232
+ }