@nebutra/theme 0.2.1 → 0.2.2

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 (39) hide show
  1. package/dist/brand-package-surface.d.ts +1 -0
  2. package/dist/brand-package-surface.js +34 -0
  3. package/dist/brand-package-surface.js.map +1 -0
  4. package/dist/chunk-YJGDBU5Y.js +215 -0
  5. package/dist/chunk-YJGDBU5Y.js.map +1 -0
  6. package/dist/chunk-ZSOVG5W4.js +89 -0
  7. package/dist/chunk-ZSOVG5W4.js.map +1 -0
  8. package/dist/client.d.ts +3 -0
  9. package/dist/client.js +43 -0
  10. package/dist/client.js.map +1 -0
  11. package/dist/index.d.ts +45 -0
  12. package/dist/index.js +47 -0
  13. package/dist/index.js.map +1 -0
  14. package/dist/languages.d.ts +54 -0
  15. package/dist/languages.js +19 -0
  16. package/dist/languages.js.map +1 -0
  17. package/package.json +37 -10
  18. package/skins.css +207 -834
  19. package/.turbo/turbo-build.log +0 -10
  20. package/.turbo/turbo-typecheck.log +0 -4
  21. package/AGENTS.md +0 -28
  22. package/DESIGN.md +0 -124
  23. package/scripts/sync-languages.mjs +0 -189
  24. package/scripts/sync-skins.mjs +0 -83
  25. package/scripts/sync-themes.mjs +0 -40
  26. package/src/__tests__/apply-language.test.ts +0 -70
  27. package/src/__tests__/languages.test.ts +0 -100
  28. package/src/__tests__/theme-registry.test.ts +0 -27
  29. package/src/apply-language.ts +0 -87
  30. package/src/brand-package-surface.ts +0 -30
  31. package/src/built-in-packages.generated.ts +0 -39
  32. package/src/built-in-packages.ts +0 -14
  33. package/src/client.ts +0 -35
  34. package/src/index.ts +0 -53
  35. package/src/languages.meta.json +0 -62
  36. package/src/languages.ts +0 -70
  37. package/src/registry.json +0 -7
  38. package/tsconfig.json +0 -10
  39. package/turbo.json +0 -25
package/skins.css CHANGED
@@ -13,7 +13,7 @@
13
13
  /**
14
14
  * Brand carrier skin: GSAP (gsap) v1.0.0
15
15
  * darkDefault=true dualMode=false button=gradient-stroke
16
- * fonts=2 zones=yes mode=global
16
+ * fonts=2 mode=global
17
17
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
18
18
  */
19
19
 
@@ -103,10 +103,10 @@ html[data-brand="gsap"] {
103
103
  --elevation-card: 0 0 #0000;
104
104
  --elevation-control: 0 0 #0000;
105
105
  --elevation-raised: 0 0 #0000;
106
- --shadow-xs: 0 0 #0000;
107
- --shadow-sm: 0 0 #0000;
108
- --shadow-md: 0 0 #0000;
109
- --shadow-lg: 0 0 #0000;
106
+ --elevation-xs: 0 0 #0000;
107
+ --elevation-sm: 0 0 #0000;
108
+ --elevation-md: 0 0 #0000;
109
+ --elevation-lg: 0 0 #0000;
110
110
  --btn-default-shadow: 0 0 #0000;
111
111
  --btn-default-bg: transparent;
112
112
  --btn-default-fg: hsl(var(--foreground));
@@ -124,6 +124,9 @@ html[data-brand="gsap"] {
124
124
  --control-height-sm: 1.75rem;
125
125
  --control-height-md: 2rem;
126
126
  --control-height-lg: 2.5rem;
127
+ --control-height-icon-sm: 1.5rem;
128
+ --control-height-icon-md: 1.75rem;
129
+ --control-height-icon-lg: 2rem;
127
130
  --control-font-size-md: 0.8125rem;
128
131
 
129
132
  /* Typography */
@@ -132,44 +135,29 @@ html[data-brand="gsap"] {
132
135
  --font-display: "Mori", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
133
136
  --font-weight-heading: 600;
134
137
 
135
- /* Zone type scales */
136
- --zone-product-caption-size: 14px;
137
- --zone-product-caption-leading: 1.4;
138
- --zone-product-caption-tracking: -0.14px;
139
- --zone-product-caption-weight: 400;
140
- --zone-product-body-sm-size: 16px;
141
- --zone-product-body-sm-leading: 1.15;
142
- --zone-product-body-sm-weight: 400;
143
- --zone-product-body-size: 19px;
144
- --zone-product-body-leading: 1.15;
145
- --zone-product-body-weight: 400;
146
- --zone-product-body-lg-size: 23px;
147
- --zone-product-body-lg-leading: 1.38;
148
- --zone-product-body-lg-tracking: -0.23px;
149
- --zone-product-body-lg-weight: 400;
150
- --zone-product-subheading-size: 34px;
151
- --zone-product-subheading-leading: 1.2;
152
- --zone-product-subheading-tracking: -0.34px;
153
- --zone-product-subheading-weight: 400;
154
- --zone-product-heading-size: 44px;
155
- --zone-product-heading-leading: 1.2;
156
- --zone-product-heading-tracking: -0.44px;
157
- --zone-product-heading-weight: 600;
158
- --zone-marketing-body-size: 19px;
159
- --zone-marketing-body-leading: 1.15;
160
- --zone-marketing-body-weight: 400;
161
- --zone-marketing-heading-size: 66px;
162
- --zone-marketing-heading-leading: 1.2;
163
- --zone-marketing-heading-tracking: -0.66px;
164
- --zone-marketing-heading-weight: 600;
165
- --zone-marketing-heading-lg-size: 101px;
166
- --zone-marketing-heading-lg-leading: 1;
167
- --zone-marketing-heading-lg-tracking: -1.11px;
168
- --zone-marketing-heading-lg-weight: 600;
169
- --zone-marketing-display-size: 224px;
170
- --zone-marketing-display-leading: 0.9;
171
- --zone-marketing-display-tracking: -4.48px;
172
- --zone-marketing-display-weight: 600;
138
+ /* Motion */
139
+ --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
140
+ --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
141
+ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
142
+ --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
143
+ --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
144
+ --motion-ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
145
+ --duration-micro: 120ms;
146
+ --motion-duration-micro: 120ms;
147
+ --duration-flow: 250ms;
148
+ --motion-duration-flow: 250ms;
149
+ --duration-reveal: 400ms;
150
+ --motion-duration-reveal: 400ms;
151
+ --duration-cinematic: 700ms;
152
+ --motion-duration-cinematic: 700ms;
153
+
154
+ /* Spacing */
155
+ --space-source-xs: 0.5rem;
156
+ --space-source-sm: 0.875rem;
157
+ --space-source-md: 1.25rem;
158
+ --space-source-lg: 1.75rem;
159
+ --space-source-xl: 2.5rem;
160
+ --space-source-2xl: 3.5rem;
173
161
 
174
162
  /* Taxonomy / decorative (not product CTA) */
175
163
  --brand-category-gsap: #0ae448;
@@ -180,86 +168,10 @@ html[data-brand="gsap"] {
180
168
  --brand-category-other: #abff84;
181
169
  }
182
170
 
183
- /* Zone: product — product never inherits marketing display */
184
- [data-zone="product"],
185
- .zone-product {
186
- font-size: var(--zone-product-body-size, 19px);
187
- line-height: var(--zone-product-body-leading, 1.15);
188
- font-weight: var(--zone-product-body-weight, 400);
189
- --text-caption: var(--zone-product-caption-size, inherit);
190
- --leading-caption: var(--zone-product-caption-leading, inherit);
191
- --tracking-caption: var(--zone-product-caption-tracking, inherit);
192
- --text-body-sm: var(--zone-product-body-sm-size, inherit);
193
- --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
194
- --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
195
- --text-body: var(--zone-product-body-size, inherit);
196
- --leading-body: var(--zone-product-body-leading, inherit);
197
- --tracking-body: var(--zone-product-body-tracking, inherit);
198
- --text-body-lg: var(--zone-product-body-lg-size, inherit);
199
- --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
200
- --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
201
- --text-subheading: var(--zone-product-subheading-size, inherit);
202
- --leading-subheading: var(--zone-product-subheading-leading, inherit);
203
- --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
204
- --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
205
- --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
206
- --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
207
- --text-heading: var(--zone-product-heading-size, inherit);
208
- --leading-heading: var(--zone-product-heading-leading, inherit);
209
- --tracking-heading: var(--zone-product-heading-tracking, inherit);
210
- --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
211
- --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
212
- --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
213
- --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
214
- --leading-display: var(--zone-product-display-leading, inherit);
215
- --tracking-display: var(--zone-product-display-tracking, inherit);
216
- }
217
-
218
- /* Zone: marketing — product never inherits marketing display */
219
- [data-zone="marketing"],
220
- .zone-marketing {
221
- font-size: var(--zone-marketing-body-size, 19px);
222
- line-height: var(--zone-marketing-body-leading, 1.15);
223
- font-weight: var(--zone-marketing-body-weight, 400);
224
- --text-caption: var(--zone-marketing-caption-size, inherit);
225
- --leading-caption: var(--zone-marketing-caption-leading, inherit);
226
- --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
227
- --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
228
- --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
229
- --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
230
- --text-body: var(--zone-marketing-body-size, inherit);
231
- --leading-body: var(--zone-marketing-body-leading, inherit);
232
- --tracking-body: var(--zone-marketing-body-tracking, inherit);
233
- --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
234
- --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
235
- --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
236
- --text-subheading: var(--zone-marketing-subheading-size, inherit);
237
- --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
238
- --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
239
- --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
240
- --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
241
- --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
242
- --text-heading: var(--zone-marketing-heading-size, inherit);
243
- --leading-heading: var(--zone-marketing-heading-leading, inherit);
244
- --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
245
- --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
246
- --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
247
- --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
248
- --text-display: var(--zone-marketing-display-size, inherit);
249
- --leading-display: var(--zone-marketing-display-leading, inherit);
250
- --tracking-display: var(--zone-marketing-display-tracking, inherit);
251
- }
252
-
253
- /* Product chrome must not use decorative gradients as action fills */
254
- [data-zone="product"] .btn-brand-default,
255
- .zone-product .btn-brand-default {
256
- /* intentional no-op: documents contract; action uses --primary only */
257
- }
258
-
259
171
  /**
260
172
  * Brand carrier skin: Linear (linear) v1.0.0
261
173
  * darkDefault=true dualMode=true button=solid
262
- * fonts=1 zones=yes mode=global
174
+ * fonts=1 mode=global
263
175
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
264
176
  */
265
177
 
@@ -340,19 +252,19 @@ html[data-brand="linear"] {
340
252
  --radius-pill: 9999px;
341
253
 
342
254
  /* Free elevation (carrier-provided CSS shadows) */
343
- --elevation-card: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
344
- --elevation-control: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.04));
345
- --elevation-raised: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
346
- --shadow-xs: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.04));
347
- --shadow-sm: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
348
- --shadow-md: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
349
- --shadow-lg: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
255
+ --elevation-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);
256
+ --elevation-control: 0 1px 2px 0 rgb(0 0 0 / 0.04);
257
+ --elevation-raised: 0 4px 6px -1px rgb(0 0 0 / 0.1);
258
+ --elevation-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
259
+ --elevation-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
260
+ --elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
261
+ --elevation-lg: 0 4px 6px -1px rgb(0 0 0 / 0.1);
350
262
  --btn-default-shadow: 0 0 #0000;
351
263
  --btn-default-bg: hsl(var(--primary));
352
264
  --btn-default-fg: hsl(var(--primary-foreground));
353
265
  --btn-default-border-width: 0px;
354
266
  --btn-default-border: transparent;
355
- --btn-default-stroke-gradient: transparent;
267
+ --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
356
268
  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
357
269
  --badge-default-bg: hsl(var(--primary));
358
270
  --badge-default-fg: hsl(var(--primary-foreground));
@@ -364,6 +276,9 @@ html[data-brand="linear"] {
364
276
  --control-height-sm: 1.75rem;
365
277
  --control-height-md: 2rem;
366
278
  --control-height-lg: 2.5rem;
279
+ --control-height-icon-sm: 1.5rem;
280
+ --control-height-icon-md: 1.75rem;
281
+ --control-height-icon-lg: 2rem;
367
282
  --control-font-size-md: 0.8125rem;
368
283
 
369
284
  /* Typography */
@@ -373,38 +288,27 @@ html[data-brand="linear"] {
373
288
  --font-mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace;
374
289
  --font-weight-heading: 510;
375
290
 
376
- /* Zone type scales */
377
- --zone-product-caption-size: 13px;
378
- --zone-product-caption-leading: 1.2;
379
- --zone-product-caption-weight: 400;
380
- --zone-product-body-sm-size: 14px;
381
- --zone-product-body-sm-leading: 1.5;
382
- --zone-product-body-sm-weight: 400;
383
- --zone-product-body-size: 14px;
384
- --zone-product-body-leading: 1.5;
385
- --zone-product-body-weight: 400;
386
- --zone-product-body-lg-size: 16px;
387
- --zone-product-body-lg-leading: 1.5;
388
- --zone-product-body-lg-weight: 400;
389
- --zone-product-heading-size: 24px;
390
- --zone-product-heading-leading: 1.25;
391
- --zone-product-heading-tracking: -0.012em;
392
- --zone-product-heading-weight: 510;
393
- --zone-product-display-size: 32px;
394
- --zone-product-display-leading: 1.15;
395
- --zone-product-display-tracking: -0.022em;
396
- --zone-product-display-weight: 510;
397
- --zone-marketing-body-size: 15px;
398
- --zone-marketing-body-leading: 1.6;
399
- --zone-marketing-body-weight: 400;
400
- --zone-marketing-heading-size: 48px;
401
- --zone-marketing-heading-leading: 1;
402
- --zone-marketing-heading-tracking: -0.022em;
403
- --zone-marketing-heading-weight: 510;
404
- --zone-marketing-display-size: 72px;
405
- --zone-marketing-display-leading: 1;
406
- --zone-marketing-display-tracking: -0.022em;
407
- --zone-marketing-display-weight: 510;
291
+ /* Motion */
292
+ --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
293
+ --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
294
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
295
+ --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
296
+ --duration-micro: 80ms;
297
+ --motion-duration-micro: 80ms;
298
+ --duration-flow: 140ms;
299
+ --motion-duration-flow: 140ms;
300
+ --duration-reveal: 200ms;
301
+ --motion-duration-reveal: 200ms;
302
+ --duration-cinematic: 320ms;
303
+ --motion-duration-cinematic: 320ms;
304
+
305
+ /* Spacing */
306
+ --space-source-xs: 0.375rem;
307
+ --space-source-sm: 0.5rem;
308
+ --space-source-md: 0.75rem;
309
+ --space-source-lg: 1rem;
310
+ --space-source-xl: 1.5rem;
311
+ --space-source-2xl: 2rem;
408
312
  }
409
313
 
410
314
  .dark,
@@ -462,86 +366,10 @@ html.dark[data-brand="linear"] {
462
366
  --brand-gradient-radial: hsl(var(--primary));
463
367
  }
464
368
 
465
- /* Zone: product — product never inherits marketing display */
466
- [data-zone="product"],
467
- .zone-product {
468
- font-size: var(--zone-product-body-size, 14px);
469
- line-height: var(--zone-product-body-leading, 1.5);
470
- font-weight: var(--zone-product-body-weight, 400);
471
- --text-caption: var(--zone-product-caption-size, inherit);
472
- --leading-caption: var(--zone-product-caption-leading, inherit);
473
- --tracking-caption: var(--zone-product-caption-tracking, inherit);
474
- --text-body-sm: var(--zone-product-body-sm-size, inherit);
475
- --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
476
- --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
477
- --text-body: var(--zone-product-body-size, inherit);
478
- --leading-body: var(--zone-product-body-leading, inherit);
479
- --tracking-body: var(--zone-product-body-tracking, inherit);
480
- --text-body-lg: var(--zone-product-body-lg-size, inherit);
481
- --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
482
- --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
483
- --text-subheading: var(--zone-product-subheading-size, inherit);
484
- --leading-subheading: var(--zone-product-subheading-leading, inherit);
485
- --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
486
- --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
487
- --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
488
- --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
489
- --text-heading: var(--zone-product-heading-size, inherit);
490
- --leading-heading: var(--zone-product-heading-leading, inherit);
491
- --tracking-heading: var(--zone-product-heading-tracking, inherit);
492
- --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
493
- --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
494
- --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
495
- --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
496
- --leading-display: var(--zone-product-display-leading, inherit);
497
- --tracking-display: var(--zone-product-display-tracking, inherit);
498
- }
499
-
500
- /* Zone: marketing — product never inherits marketing display */
501
- [data-zone="marketing"],
502
- .zone-marketing {
503
- font-size: var(--zone-marketing-body-size, 15px);
504
- line-height: var(--zone-marketing-body-leading, 1.6);
505
- font-weight: var(--zone-marketing-body-weight, 400);
506
- --text-caption: var(--zone-marketing-caption-size, inherit);
507
- --leading-caption: var(--zone-marketing-caption-leading, inherit);
508
- --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
509
- --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
510
- --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
511
- --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
512
- --text-body: var(--zone-marketing-body-size, inherit);
513
- --leading-body: var(--zone-marketing-body-leading, inherit);
514
- --tracking-body: var(--zone-marketing-body-tracking, inherit);
515
- --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
516
- --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
517
- --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
518
- --text-subheading: var(--zone-marketing-subheading-size, inherit);
519
- --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
520
- --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
521
- --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
522
- --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
523
- --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
524
- --text-heading: var(--zone-marketing-heading-size, inherit);
525
- --leading-heading: var(--zone-marketing-heading-leading, inherit);
526
- --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
527
- --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
528
- --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
529
- --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
530
- --text-display: var(--zone-marketing-display-size, inherit);
531
- --leading-display: var(--zone-marketing-display-leading, inherit);
532
- --tracking-display: var(--zone-marketing-display-tracking, inherit);
533
- }
534
-
535
- /* Product chrome must not use decorative gradients as action fills */
536
- [data-zone="product"] .btn-brand-default,
537
- .zone-product .btn-brand-default {
538
- /* intentional no-op: documents contract; action uses --primary only */
539
- }
540
-
541
369
  /**
542
370
  * Brand carrier skin: Notion (notion) v1.0.0
543
371
  * darkDefault=false dualMode=false button=solid
544
- * fonts=2 zones=yes mode=global
372
+ * fonts=2 mode=global
545
373
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
546
374
  */
547
375
 
@@ -636,16 +464,16 @@ html[data-brand="notion"] {
636
464
  --elevation-card: 0 0 #0000;
637
465
  --elevation-control: 0 0 #0000;
638
466
  --elevation-raised: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
639
- --shadow-xs: 0 0 #0000;
640
- --shadow-sm: 0 0 #0000;
641
- --shadow-md: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
642
- --shadow-lg: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
467
+ --elevation-xs: 0 0 #0000;
468
+ --elevation-sm: 0 0 #0000;
469
+ --elevation-md: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
470
+ --elevation-lg: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
643
471
  --btn-default-shadow: 0 0 #0000;
644
472
  --btn-default-bg: hsl(var(--primary));
645
473
  --btn-default-fg: hsl(var(--primary-foreground));
646
474
  --btn-default-border-width: 0px;
647
475
  --btn-default-border: transparent;
648
- --btn-default-stroke-gradient: transparent;
476
+ --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
649
477
  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
650
478
  --badge-default-bg: hsl(var(--secondary));
651
479
  --badge-default-fg: hsl(var(--secondary-foreground));
@@ -658,41 +486,27 @@ html[data-brand="notion"] {
658
486
  --font-display: "NotionInter", "Inter", ui-sans-serif, system-ui, sans-serif;
659
487
  --font-weight-heading: 700;
660
488
 
661
- /* Zone type scales */
662
- --zone-product-caption-size: 12px;
663
- --zone-product-caption-leading: 1.33;
664
- --zone-product-caption-tracking: 0.12px;
665
- --zone-product-caption-weight: 500;
666
- --zone-product-body-sm-size: 14px;
667
- --zone-product-body-sm-leading: 1.43;
668
- --zone-product-body-sm-weight: 500;
669
- --zone-product-body-size: 16px;
670
- --zone-product-body-leading: 1.5;
671
- --zone-product-body-weight: 400;
672
- --zone-product-subheading-size: 20px;
673
- --zone-product-subheading-leading: 1;
674
- --zone-product-subheading-weight: 500;
675
- --zone-product-heading-sm-size: 22px;
676
- --zone-product-heading-sm-leading: 1.27;
677
- --zone-product-heading-sm-tracking: -0.242px;
678
- --zone-product-heading-sm-weight: 600;
679
- --zone-product-heading-size: 40px;
680
- --zone-product-heading-leading: 1.5;
681
- --zone-product-heading-weight: 600;
682
- --zone-marketing-body-size: 16px;
683
- --zone-marketing-body-leading: 1.5;
684
- --zone-marketing-body-weight: 400;
685
- --zone-marketing-heading-size: 48px;
686
- --zone-marketing-heading-leading: 1.5;
687
- --zone-marketing-heading-weight: 700;
688
- --zone-marketing-heading-lg-size: 54px;
689
- --zone-marketing-heading-lg-leading: 1.04;
690
- --zone-marketing-heading-lg-tracking: -1.89px;
691
- --zone-marketing-heading-lg-weight: 700;
692
- --zone-marketing-display-size: 72px;
693
- --zone-marketing-display-leading: 1.21;
694
- --zone-marketing-display-tracking: -2.016px;
695
- --zone-marketing-display-weight: 700;
489
+ /* Motion */
490
+ --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
491
+ --motion-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
492
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
493
+ --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
494
+ --duration-micro: 120ms;
495
+ --motion-duration-micro: 120ms;
496
+ --duration-flow: 200ms;
497
+ --motion-duration-flow: 200ms;
498
+ --duration-reveal: 280ms;
499
+ --motion-duration-reveal: 280ms;
500
+ --duration-cinematic: 460ms;
501
+ --motion-duration-cinematic: 460ms;
502
+
503
+ /* Spacing */
504
+ --space-source-xs: 0.625rem;
505
+ --space-source-sm: 1rem;
506
+ --space-source-md: 1.5rem;
507
+ --space-source-lg: 2rem;
508
+ --space-source-xl: 2.75rem;
509
+ --space-source-2xl: 3.75rem;
696
510
 
697
511
  /* Taxonomy / decorative (not product CTA) */
698
512
  --brand-category-brand: #000000;
@@ -710,86 +524,10 @@ html[data-brand="notion"] {
710
524
  --brand-decorative-midnight: #02093a;
711
525
  }
712
526
 
713
- /* Zone: product — product never inherits marketing display */
714
- [data-zone="product"],
715
- .zone-product {
716
- font-size: var(--zone-product-body-size, 16px);
717
- line-height: var(--zone-product-body-leading, 1.5);
718
- font-weight: var(--zone-product-body-weight, 400);
719
- --text-caption: var(--zone-product-caption-size, inherit);
720
- --leading-caption: var(--zone-product-caption-leading, inherit);
721
- --tracking-caption: var(--zone-product-caption-tracking, inherit);
722
- --text-body-sm: var(--zone-product-body-sm-size, inherit);
723
- --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
724
- --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
725
- --text-body: var(--zone-product-body-size, inherit);
726
- --leading-body: var(--zone-product-body-leading, inherit);
727
- --tracking-body: var(--zone-product-body-tracking, inherit);
728
- --text-body-lg: var(--zone-product-body-lg-size, inherit);
729
- --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
730
- --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
731
- --text-subheading: var(--zone-product-subheading-size, inherit);
732
- --leading-subheading: var(--zone-product-subheading-leading, inherit);
733
- --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
734
- --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
735
- --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
736
- --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
737
- --text-heading: var(--zone-product-heading-size, inherit);
738
- --leading-heading: var(--zone-product-heading-leading, inherit);
739
- --tracking-heading: var(--zone-product-heading-tracking, inherit);
740
- --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
741
- --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
742
- --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
743
- --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
744
- --leading-display: var(--zone-product-display-leading, inherit);
745
- --tracking-display: var(--zone-product-display-tracking, inherit);
746
- }
747
-
748
- /* Zone: marketing — product never inherits marketing display */
749
- [data-zone="marketing"],
750
- .zone-marketing {
751
- font-size: var(--zone-marketing-body-size, 16px);
752
- line-height: var(--zone-marketing-body-leading, 1.5);
753
- font-weight: var(--zone-marketing-body-weight, 400);
754
- --text-caption: var(--zone-marketing-caption-size, inherit);
755
- --leading-caption: var(--zone-marketing-caption-leading, inherit);
756
- --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
757
- --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
758
- --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
759
- --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
760
- --text-body: var(--zone-marketing-body-size, inherit);
761
- --leading-body: var(--zone-marketing-body-leading, inherit);
762
- --tracking-body: var(--zone-marketing-body-tracking, inherit);
763
- --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
764
- --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
765
- --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
766
- --text-subheading: var(--zone-marketing-subheading-size, inherit);
767
- --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
768
- --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
769
- --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
770
- --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
771
- --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
772
- --text-heading: var(--zone-marketing-heading-size, inherit);
773
- --leading-heading: var(--zone-marketing-heading-leading, inherit);
774
- --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
775
- --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
776
- --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
777
- --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
778
- --text-display: var(--zone-marketing-display-size, inherit);
779
- --leading-display: var(--zone-marketing-display-leading, inherit);
780
- --tracking-display: var(--zone-marketing-display-tracking, inherit);
781
- }
782
-
783
- /* Product chrome must not use decorative gradients as action fills */
784
- [data-zone="product"] .btn-brand-default,
785
- .zone-product .btn-brand-default {
786
- /* intentional no-op: documents contract; action uses --primary only */
787
- }
788
-
789
527
  /**
790
528
  * Brand carrier skin: Raycast (raycast) v1.0.0
791
529
  * darkDefault=true dualMode=false button=solid
792
- * fonts=1 zones=yes mode=global
530
+ * fonts=1 mode=global
793
531
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
794
532
  */
795
533
 
@@ -889,22 +627,22 @@ html[data-brand="raycast"] {
889
627
  0,
890
628
  0.2
891
629
  ) 0px -1px 0px 0px inset;
892
- --shadow-xs: 0 0 #0000;
893
- --shadow-sm:
630
+ --elevation-xs: 0 0 #0000;
631
+ --elevation-sm:
894
632
  rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
895
633
  0,
896
634
  0,
897
635
  0,
898
636
  0.2
899
637
  ) 0px -1px 0px 0px inset;
900
- --shadow-md:
638
+ --elevation-md:
901
639
  rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
902
640
  0,
903
641
  0,
904
642
  0,
905
643
  0.2
906
644
  ) 0px -1px 0px 0px inset;
907
- --shadow-lg:
645
+ --elevation-lg:
908
646
  rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
909
647
  0,
910
648
  0,
@@ -916,7 +654,7 @@ html[data-brand="raycast"] {
916
654
  --btn-default-fg: hsl(var(--primary-foreground));
917
655
  --btn-default-border-width: 0px;
918
656
  --btn-default-border: transparent;
919
- --btn-default-stroke-gradient: transparent;
657
+ --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
920
658
  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
921
659
  --badge-default-bg: hsl(var(--secondary));
922
660
  --badge-default-fg: hsl(var(--secondary-foreground));
@@ -928,6 +666,9 @@ html[data-brand="raycast"] {
928
666
  --control-height-sm: 1.75rem;
929
667
  --control-height-md: 2rem;
930
668
  --control-height-lg: 2.5rem;
669
+ --control-height-icon-sm: 1.5rem;
670
+ --control-height-icon-md: 1.75rem;
671
+ --control-height-icon-lg: 2rem;
931
672
  --control-font-size-md: 0.8125rem;
932
673
 
933
674
  /* Typography */
@@ -937,43 +678,29 @@ html[data-brand="raycast"] {
937
678
  --font-mono: "Geist Mono", "GeistMono", ui-monospace, Menlo, monospace;
938
679
  --font-weight-heading: 400;
939
680
 
940
- /* Zone type scales */
941
- --zone-product-caption-size: 11px;
942
- --zone-product-caption-leading: 0.91;
943
- --zone-product-caption-tracking: 0.8px;
944
- --zone-product-caption-weight: 500;
945
- --zone-product-body-sm-size: 13px;
946
- --zone-product-body-sm-leading: 1.2;
947
- --zone-product-body-sm-weight: 500;
948
- --zone-product-body-size: 16px;
949
- --zone-product-body-leading: 1.15;
950
- --zone-product-body-weight: 400;
951
- --zone-product-body-lg-size: 18px;
952
- --zone-product-body-lg-leading: 1.15;
953
- --zone-product-body-lg-weight: 400;
954
- --zone-product-subheading-size: 20px;
955
- --zone-product-subheading-leading: 1.2;
956
- --zone-product-subheading-tracking: 0.2px;
957
- --zone-product-subheading-weight: 400;
958
- --zone-product-heading-sm-size: 24px;
959
- --zone-product-heading-sm-leading: 1.15;
960
- --zone-product-heading-sm-weight: 500;
961
- --zone-product-heading-size: 32px;
962
- --zone-product-heading-leading: 1.15;
963
- --zone-product-heading-weight: 500;
964
- --zone-marketing-body-size: 16px;
965
- --zone-marketing-body-leading: 1.15;
966
- --zone-marketing-body-weight: 400;
967
- --zone-marketing-heading-size: 32px;
968
- --zone-marketing-heading-leading: 1.15;
969
- --zone-marketing-heading-weight: 500;
970
- --zone-marketing-heading-lg-size: 56px;
971
- --zone-marketing-heading-lg-leading: 1.17;
972
- --zone-marketing-heading-lg-tracking: 0.22px;
973
- --zone-marketing-heading-lg-weight: 400;
974
- --zone-marketing-display-size: 64px;
975
- --zone-marketing-display-leading: 1.1;
976
- --zone-marketing-display-weight: 600;
681
+ /* Motion */
682
+ --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
683
+ --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
684
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
685
+ --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
686
+ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
687
+ --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
688
+ --duration-micro: 90ms;
689
+ --motion-duration-micro: 90ms;
690
+ --duration-flow: 160ms;
691
+ --motion-duration-flow: 160ms;
692
+ --duration-reveal: 220ms;
693
+ --motion-duration-reveal: 220ms;
694
+ --duration-cinematic: 340ms;
695
+ --motion-duration-cinematic: 340ms;
696
+
697
+ /* Spacing */
698
+ --space-source-xs: 0.375rem;
699
+ --space-source-sm: 0.5rem;
700
+ --space-source-md: 0.75rem;
701
+ --space-source-lg: 1rem;
702
+ --space-source-xl: 1.375rem;
703
+ --space-source-2xl: 2rem;
977
704
 
978
705
  /* Taxonomy / decorative (not product CTA) */
979
706
  --brand-category-brand: #ff6363;
@@ -981,86 +708,10 @@ html[data-brand="raycast"] {
981
708
  --brand-category-sky: #63a1ff;
982
709
  }
983
710
 
984
- /* Zone: product — product never inherits marketing display */
985
- [data-zone="product"],
986
- .zone-product {
987
- font-size: var(--zone-product-body-size, 16px);
988
- line-height: var(--zone-product-body-leading, 1.15);
989
- font-weight: var(--zone-product-body-weight, 400);
990
- --text-caption: var(--zone-product-caption-size, inherit);
991
- --leading-caption: var(--zone-product-caption-leading, inherit);
992
- --tracking-caption: var(--zone-product-caption-tracking, inherit);
993
- --text-body-sm: var(--zone-product-body-sm-size, inherit);
994
- --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
995
- --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
996
- --text-body: var(--zone-product-body-size, inherit);
997
- --leading-body: var(--zone-product-body-leading, inherit);
998
- --tracking-body: var(--zone-product-body-tracking, inherit);
999
- --text-body-lg: var(--zone-product-body-lg-size, inherit);
1000
- --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
1001
- --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
1002
- --text-subheading: var(--zone-product-subheading-size, inherit);
1003
- --leading-subheading: var(--zone-product-subheading-leading, inherit);
1004
- --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
1005
- --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
1006
- --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
1007
- --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
1008
- --text-heading: var(--zone-product-heading-size, inherit);
1009
- --leading-heading: var(--zone-product-heading-leading, inherit);
1010
- --tracking-heading: var(--zone-product-heading-tracking, inherit);
1011
- --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
1012
- --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
1013
- --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
1014
- --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
1015
- --leading-display: var(--zone-product-display-leading, inherit);
1016
- --tracking-display: var(--zone-product-display-tracking, inherit);
1017
- }
1018
-
1019
- /* Zone: marketing — product never inherits marketing display */
1020
- [data-zone="marketing"],
1021
- .zone-marketing {
1022
- font-size: var(--zone-marketing-body-size, 16px);
1023
- line-height: var(--zone-marketing-body-leading, 1.15);
1024
- font-weight: var(--zone-marketing-body-weight, 400);
1025
- --text-caption: var(--zone-marketing-caption-size, inherit);
1026
- --leading-caption: var(--zone-marketing-caption-leading, inherit);
1027
- --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
1028
- --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
1029
- --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
1030
- --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
1031
- --text-body: var(--zone-marketing-body-size, inherit);
1032
- --leading-body: var(--zone-marketing-body-leading, inherit);
1033
- --tracking-body: var(--zone-marketing-body-tracking, inherit);
1034
- --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
1035
- --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
1036
- --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
1037
- --text-subheading: var(--zone-marketing-subheading-size, inherit);
1038
- --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
1039
- --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
1040
- --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
1041
- --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
1042
- --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
1043
- --text-heading: var(--zone-marketing-heading-size, inherit);
1044
- --leading-heading: var(--zone-marketing-heading-leading, inherit);
1045
- --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
1046
- --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
1047
- --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
1048
- --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
1049
- --text-display: var(--zone-marketing-display-size, inherit);
1050
- --leading-display: var(--zone-marketing-display-leading, inherit);
1051
- --tracking-display: var(--zone-marketing-display-tracking, inherit);
1052
- }
1053
-
1054
- /* Product chrome must not use decorative gradients as action fills */
1055
- [data-zone="product"] .btn-brand-default,
1056
- .zone-product .btn-brand-default {
1057
- /* intentional no-op: documents contract; action uses --primary only */
1058
- }
1059
-
1060
711
  /**
1061
712
  * Brand carrier skin: Stripe (stripe) v1.0.0
1062
713
  * darkDefault=false dualMode=false button=solid
1063
- * fonts=1 zones=yes mode=global
714
+ * fonts=1 mode=global
1064
715
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
1065
716
  */
1066
717
 
@@ -1145,16 +796,16 @@ html[data-brand="stripe"] {
1145
796
  --elevation-card: 0 0 #0000;
1146
797
  --elevation-control: 0 0 #0000;
1147
798
  --elevation-raised: 0 0 #0000;
1148
- --shadow-xs: 0 0 #0000;
1149
- --shadow-sm: 0 0 #0000;
1150
- --shadow-md: 0 0 #0000;
1151
- --shadow-lg: 0 0 #0000;
799
+ --elevation-xs: 0 0 #0000;
800
+ --elevation-sm: 0 0 #0000;
801
+ --elevation-md: 0 0 #0000;
802
+ --elevation-lg: 0 0 #0000;
1152
803
  --btn-default-shadow: 0 0 #0000;
1153
804
  --btn-default-bg: hsl(var(--primary));
1154
805
  --btn-default-fg: hsl(var(--primary-foreground));
1155
806
  --btn-default-border-width: 0px;
1156
807
  --btn-default-border: transparent;
1157
- --btn-default-stroke-gradient: transparent;
808
+ --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
1158
809
  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
1159
810
  --badge-default-bg: hsl(var(--secondary));
1160
811
  --badge-default-fg: hsl(var(--secondary-foreground));
@@ -1167,51 +818,27 @@ html[data-brand="stripe"] {
1167
818
  --font-display: "sohne-var", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
1168
819
  --font-weight-heading: 300;
1169
820
 
1170
- /* Zone type scales */
1171
- --zone-product-caption-size: 12px;
1172
- --zone-product-caption-leading: 1.45;
1173
- --zone-product-caption-tracking: -0.12px;
1174
- --zone-product-caption-weight: 300;
1175
- --zone-product-body-sm-size: 14px;
1176
- --zone-product-body-sm-leading: 1.4;
1177
- --zone-product-body-sm-tracking: -0.14px;
1178
- --zone-product-body-sm-weight: 400;
1179
- --zone-product-body-size: 16px;
1180
- --zone-product-body-leading: 1.2;
1181
- --zone-product-body-tracking: -0.16px;
1182
- --zone-product-body-weight: 400;
1183
- --zone-product-body-lg-size: 20px;
1184
- --zone-product-body-lg-leading: 1.4;
1185
- --zone-product-body-lg-tracking: -0.2px;
1186
- --zone-product-body-lg-weight: 300;
1187
- --zone-product-subheading-size: 22px;
1188
- --zone-product-subheading-leading: 1.1;
1189
- --zone-product-subheading-tracking: -0.22px;
1190
- --zone-product-subheading-weight: 300;
1191
- --zone-product-heading-sm-size: 26px;
1192
- --zone-product-heading-sm-leading: 1.12;
1193
- --zone-product-heading-sm-tracking: -0.26px;
1194
- --zone-product-heading-sm-weight: 300;
1195
- --zone-product-heading-size: 32px;
1196
- --zone-product-heading-leading: 1.1;
1197
- --zone-product-heading-tracking: -0.64px;
1198
- --zone-product-heading-weight: 300;
1199
- --zone-marketing-body-size: 16px;
1200
- --zone-marketing-body-leading: 1.4;
1201
- --zone-marketing-body-tracking: -0.16px;
1202
- --zone-marketing-body-weight: 300;
1203
- --zone-marketing-heading-size: 32px;
1204
- --zone-marketing-heading-leading: 1.1;
1205
- --zone-marketing-heading-tracking: -0.64px;
1206
- --zone-marketing-heading-weight: 300;
1207
- --zone-marketing-heading-lg-size: 48px;
1208
- --zone-marketing-heading-lg-leading: 1.03;
1209
- --zone-marketing-heading-lg-tracking: -0.96px;
1210
- --zone-marketing-heading-lg-weight: 300;
1211
- --zone-marketing-display-size: 56px;
1212
- --zone-marketing-display-leading: 1.03;
1213
- --zone-marketing-display-tracking: -1.4px;
1214
- --zone-marketing-display-weight: 300;
821
+ /* Motion */
822
+ --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
823
+ --motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
824
+ --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
825
+ --motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
826
+ --duration-micro: 100ms;
827
+ --motion-duration-micro: 100ms;
828
+ --duration-flow: 180ms;
829
+ --motion-duration-flow: 180ms;
830
+ --duration-reveal: 260ms;
831
+ --motion-duration-reveal: 260ms;
832
+ --duration-cinematic: 400ms;
833
+ --motion-duration-cinematic: 400ms;
834
+
835
+ /* Spacing */
836
+ --space-source-xs: 0.5rem;
837
+ --space-source-sm: 0.75rem;
838
+ --space-source-md: 1.125rem;
839
+ --space-source-lg: 1.75rem;
840
+ --space-source-xl: 2.25rem;
841
+ --space-source-2xl: 3.25rem;
1215
842
 
1216
843
  /* Taxonomy / decorative (not product CTA) */
1217
844
  --brand-category-brand: #061b31;
@@ -1227,88 +854,10 @@ html[data-brand="stripe"] {
1227
854
  --brand-decorative-frost: #e5edf5;
1228
855
  }
1229
856
 
1230
- /* Zone: product — product never inherits marketing display */
1231
- [data-zone="product"],
1232
- .zone-product {
1233
- font-size: var(--zone-product-body-size, 16px);
1234
- line-height: var(--zone-product-body-leading, 1.2);
1235
- font-weight: var(--zone-product-body-weight, 400);
1236
- letter-spacing: var(--zone-product-body-tracking, -0.16px);
1237
- --text-caption: var(--zone-product-caption-size, inherit);
1238
- --leading-caption: var(--zone-product-caption-leading, inherit);
1239
- --tracking-caption: var(--zone-product-caption-tracking, inherit);
1240
- --text-body-sm: var(--zone-product-body-sm-size, inherit);
1241
- --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
1242
- --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
1243
- --text-body: var(--zone-product-body-size, inherit);
1244
- --leading-body: var(--zone-product-body-leading, inherit);
1245
- --tracking-body: var(--zone-product-body-tracking, inherit);
1246
- --text-body-lg: var(--zone-product-body-lg-size, inherit);
1247
- --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
1248
- --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
1249
- --text-subheading: var(--zone-product-subheading-size, inherit);
1250
- --leading-subheading: var(--zone-product-subheading-leading, inherit);
1251
- --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
1252
- --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
1253
- --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
1254
- --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
1255
- --text-heading: var(--zone-product-heading-size, inherit);
1256
- --leading-heading: var(--zone-product-heading-leading, inherit);
1257
- --tracking-heading: var(--zone-product-heading-tracking, inherit);
1258
- --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
1259
- --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
1260
- --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
1261
- --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
1262
- --leading-display: var(--zone-product-display-leading, inherit);
1263
- --tracking-display: var(--zone-product-display-tracking, inherit);
1264
- }
1265
-
1266
- /* Zone: marketing — product never inherits marketing display */
1267
- [data-zone="marketing"],
1268
- .zone-marketing {
1269
- font-size: var(--zone-marketing-body-size, 16px);
1270
- line-height: var(--zone-marketing-body-leading, 1.4);
1271
- font-weight: var(--zone-marketing-body-weight, 300);
1272
- letter-spacing: var(--zone-marketing-body-tracking, -0.16px);
1273
- --text-caption: var(--zone-marketing-caption-size, inherit);
1274
- --leading-caption: var(--zone-marketing-caption-leading, inherit);
1275
- --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
1276
- --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
1277
- --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
1278
- --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
1279
- --text-body: var(--zone-marketing-body-size, inherit);
1280
- --leading-body: var(--zone-marketing-body-leading, inherit);
1281
- --tracking-body: var(--zone-marketing-body-tracking, inherit);
1282
- --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
1283
- --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
1284
- --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
1285
- --text-subheading: var(--zone-marketing-subheading-size, inherit);
1286
- --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
1287
- --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
1288
- --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
1289
- --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
1290
- --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
1291
- --text-heading: var(--zone-marketing-heading-size, inherit);
1292
- --leading-heading: var(--zone-marketing-heading-leading, inherit);
1293
- --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
1294
- --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
1295
- --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
1296
- --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
1297
- --text-display: var(--zone-marketing-display-size, inherit);
1298
- --leading-display: var(--zone-marketing-display-leading, inherit);
1299
- --tracking-display: var(--zone-marketing-display-tracking, inherit);
1300
- }
1301
-
1302
- /* Product chrome must not use decorative gradients as action fills */
1303
- [data-zone="product"] .btn-brand-default,
1304
- .zone-product .btn-brand-default {
1305
- /* intentional no-op: documents contract; action uses --primary only */
1306
- }
1307
-
1308
857
  /**
1309
858
  * Brand carrier skin: Vanta (vanta) v1.0.0
1310
859
  * darkDefault=false dualMode=false button=solid
1311
- * fonts=3 zones=yes mode=global
860
+ * fonts=3 mode=global
1312
861
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
1313
862
  */
1314
863
 
@@ -1410,16 +959,16 @@ html[data-brand="vanta"] {
1410
959
  --elevation-card: 0 0 #0000;
1411
960
  --elevation-control: 0 0 #0000;
1412
961
  --elevation-raised: 0 0 #0000;
1413
- --shadow-xs: 0 0 #0000;
1414
- --shadow-sm: 0 0 #0000;
1415
- --shadow-md: 0 0 #0000;
1416
- --shadow-lg: 0 0 #0000;
962
+ --elevation-xs: 0 0 #0000;
963
+ --elevation-sm: 0 0 #0000;
964
+ --elevation-md: 0 0 #0000;
965
+ --elevation-lg: 0 0 #0000;
1417
966
  --btn-default-shadow: 0 0 #0000;
1418
967
  --btn-default-bg: hsl(var(--primary));
1419
968
  --btn-default-fg: hsl(var(--primary-foreground));
1420
969
  --btn-default-border-width: 0px;
1421
970
  --btn-default-border: transparent;
1422
- --btn-default-stroke-gradient: transparent;
971
+ --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
1423
972
  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
1424
973
  --badge-default-bg: hsl(var(--secondary));
1425
974
  --badge-default-fg: hsl(var(--secondary-foreground));
@@ -1432,44 +981,27 @@ html[data-brand="vanta"] {
1432
981
  --font-display: "Reckless", "Source Serif 4", "Lora", ui-serif, Georgia, serif;
1433
982
  --font-weight-heading: 500;
1434
983
 
1435
- /* Zone type scales */
1436
- --zone-product-caption-size: 12px;
1437
- --zone-product-caption-leading: 1.5;
1438
- --zone-product-caption-tracking: -0.02px;
1439
- --zone-product-caption-weight: 500;
1440
- --zone-product-body-sm-size: 14px;
1441
- --zone-product-body-sm-leading: 1.43;
1442
- --zone-product-body-sm-tracking: -0.02px;
1443
- --zone-product-body-sm-weight: 400;
1444
- --zone-product-body-size: 16px;
1445
- --zone-product-body-leading: 1.5;
1446
- --zone-product-body-tracking: -0.02px;
1447
- --zone-product-body-weight: 400;
1448
- --zone-product-subheading-size: 20px;
1449
- --zone-product-subheading-leading: 1.4;
1450
- --zone-product-subheading-weight: 500;
1451
- --zone-product-heading-sm-size: 24px;
1452
- --zone-product-heading-sm-leading: 1.35;
1453
- --zone-product-heading-sm-weight: 500;
1454
- --zone-product-heading-size: 32px;
1455
- --zone-product-heading-leading: 1.3;
1456
- --zone-product-heading-weight: 500;
1457
- --zone-marketing-body-size: 16px;
1458
- --zone-marketing-body-leading: 1.5;
1459
- --zone-marketing-body-tracking: -0.02px;
1460
- --zone-marketing-body-weight: 400;
1461
- --zone-marketing-heading-size: 42px;
1462
- --zone-marketing-heading-leading: 1.2;
1463
- --zone-marketing-heading-tracking: -0.84px;
1464
- --zone-marketing-heading-weight: 400;
1465
- --zone-marketing-heading-lg-size: 56px;
1466
- --zone-marketing-heading-lg-leading: 1.15;
1467
- --zone-marketing-heading-lg-tracking: -1.12px;
1468
- --zone-marketing-heading-lg-weight: 400;
1469
- --zone-marketing-display-size: 90px;
1470
- --zone-marketing-display-leading: 1.1;
1471
- --zone-marketing-display-tracking: -1.62px;
1472
- --zone-marketing-display-weight: 400;
984
+ /* Motion */
985
+ --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
986
+ --motion-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
987
+ --ease-in-out: cubic-bezier(0.37, 0, 0.63, 1);
988
+ --motion-ease-in-out: cubic-bezier(0.37, 0, 0.63, 1);
989
+ --duration-micro: 120ms;
990
+ --motion-duration-micro: 120ms;
991
+ --duration-flow: 240ms;
992
+ --motion-duration-flow: 240ms;
993
+ --duration-reveal: 380ms;
994
+ --motion-duration-reveal: 380ms;
995
+ --duration-cinematic: 620ms;
996
+ --motion-duration-cinematic: 620ms;
997
+
998
+ /* Spacing */
999
+ --space-source-xs: 0.75rem;
1000
+ --space-source-sm: 1.125rem;
1001
+ --space-source-md: 1.75rem;
1002
+ --space-source-lg: 2.5rem;
1003
+ --space-source-xl: 3.5rem;
1004
+ --space-source-2xl: 5rem;
1473
1005
 
1474
1006
  /* Taxonomy / decorative (not product CTA) */
1475
1007
  --brand-category-brand: #260048;
@@ -1482,88 +1014,10 @@ html[data-brand="vanta"] {
1482
1014
  --brand-decorative-hero-wash: #ddd6ff;
1483
1015
  }
1484
1016
 
1485
- /* Zone: product — product never inherits marketing display */
1486
- [data-zone="product"],
1487
- .zone-product {
1488
- font-size: var(--zone-product-body-size, 16px);
1489
- line-height: var(--zone-product-body-leading, 1.5);
1490
- font-weight: var(--zone-product-body-weight, 400);
1491
- letter-spacing: var(--zone-product-body-tracking, -0.02px);
1492
- --text-caption: var(--zone-product-caption-size, inherit);
1493
- --leading-caption: var(--zone-product-caption-leading, inherit);
1494
- --tracking-caption: var(--zone-product-caption-tracking, inherit);
1495
- --text-body-sm: var(--zone-product-body-sm-size, inherit);
1496
- --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
1497
- --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
1498
- --text-body: var(--zone-product-body-size, inherit);
1499
- --leading-body: var(--zone-product-body-leading, inherit);
1500
- --tracking-body: var(--zone-product-body-tracking, inherit);
1501
- --text-body-lg: var(--zone-product-body-lg-size, inherit);
1502
- --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
1503
- --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
1504
- --text-subheading: var(--zone-product-subheading-size, inherit);
1505
- --leading-subheading: var(--zone-product-subheading-leading, inherit);
1506
- --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
1507
- --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
1508
- --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
1509
- --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
1510
- --text-heading: var(--zone-product-heading-size, inherit);
1511
- --leading-heading: var(--zone-product-heading-leading, inherit);
1512
- --tracking-heading: var(--zone-product-heading-tracking, inherit);
1513
- --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
1514
- --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
1515
- --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
1516
- --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
1517
- --leading-display: var(--zone-product-display-leading, inherit);
1518
- --tracking-display: var(--zone-product-display-tracking, inherit);
1519
- }
1520
-
1521
- /* Zone: marketing — product never inherits marketing display */
1522
- [data-zone="marketing"],
1523
- .zone-marketing {
1524
- font-size: var(--zone-marketing-body-size, 16px);
1525
- line-height: var(--zone-marketing-body-leading, 1.5);
1526
- font-weight: var(--zone-marketing-body-weight, 400);
1527
- letter-spacing: var(--zone-marketing-body-tracking, -0.02px);
1528
- --text-caption: var(--zone-marketing-caption-size, inherit);
1529
- --leading-caption: var(--zone-marketing-caption-leading, inherit);
1530
- --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
1531
- --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
1532
- --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
1533
- --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
1534
- --text-body: var(--zone-marketing-body-size, inherit);
1535
- --leading-body: var(--zone-marketing-body-leading, inherit);
1536
- --tracking-body: var(--zone-marketing-body-tracking, inherit);
1537
- --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
1538
- --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
1539
- --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
1540
- --text-subheading: var(--zone-marketing-subheading-size, inherit);
1541
- --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
1542
- --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
1543
- --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
1544
- --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
1545
- --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
1546
- --text-heading: var(--zone-marketing-heading-size, inherit);
1547
- --leading-heading: var(--zone-marketing-heading-leading, inherit);
1548
- --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
1549
- --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
1550
- --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
1551
- --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
1552
- --text-display: var(--zone-marketing-display-size, inherit);
1553
- --leading-display: var(--zone-marketing-display-leading, inherit);
1554
- --tracking-display: var(--zone-marketing-display-tracking, inherit);
1555
- }
1556
-
1557
- /* Product chrome must not use decorative gradients as action fills */
1558
- [data-zone="product"] .btn-brand-default,
1559
- .zone-product .btn-brand-default {
1560
- /* intentional no-op: documents contract; action uses --primary only */
1561
- }
1562
-
1563
1017
  /**
1564
1018
  * Brand carrier skin: Vercel (vercel) v1.0.0
1565
1019
  * darkDefault=false dualMode=true button=solid
1566
- * fonts=1 zones=yes mode=global
1020
+ * fonts=1 mode=global
1567
1021
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
1568
1022
  */
1569
1023
 
@@ -1647,16 +1101,16 @@ html[data-brand="vercel"] {
1647
1101
  --elevation-card: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
1648
1102
  --elevation-control: 0 0 #0000;
1649
1103
  --elevation-raised: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
1650
- --shadow-xs: 0 0 #0000;
1651
- --shadow-sm: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
1652
- --shadow-md: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
1653
- --shadow-lg: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
1104
+ --elevation-xs: 0 0 #0000;
1105
+ --elevation-sm: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
1106
+ --elevation-md: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
1107
+ --elevation-lg: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
1654
1108
  --btn-default-shadow: 0 0 #0000;
1655
1109
  --btn-default-bg: hsl(var(--primary));
1656
1110
  --btn-default-fg: hsl(var(--primary-foreground));
1657
1111
  --btn-default-border-width: 0px;
1658
1112
  --btn-default-border: transparent;
1659
- --btn-default-stroke-gradient: transparent;
1113
+ --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
1660
1114
  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
1661
1115
  --badge-default-bg: hsl(var(--secondary));
1662
1116
  --badge-default-fg: hsl(var(--secondary-foreground));
@@ -1668,6 +1122,9 @@ html[data-brand="vercel"] {
1668
1122
  --control-height-sm: 1.75rem;
1669
1123
  --control-height-md: 2rem;
1670
1124
  --control-height-lg: 2.5rem;
1125
+ --control-height-icon-sm: 1.5rem;
1126
+ --control-height-icon-md: 1.75rem;
1127
+ --control-height-icon-lg: 2rem;
1671
1128
  --control-font-size-md: 0.8125rem;
1672
1129
 
1673
1130
  /* Typography */
@@ -1677,35 +1134,27 @@ html[data-brand="vercel"] {
1677
1134
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
1678
1135
  --font-weight-heading: 450;
1679
1136
 
1680
- /* Zone type scales */
1681
- --zone-product-caption-size: 13px;
1682
- --zone-product-caption-leading: 1.54;
1683
- --zone-product-caption-weight: 400;
1684
- --zone-product-body-sm-size: 14px;
1685
- --zone-product-body-sm-leading: 1.43;
1686
- --zone-product-body-sm-weight: 400;
1687
- --zone-product-body-size: 16px;
1688
- --zone-product-body-leading: 1.5;
1689
- --zone-product-body-weight: 400;
1690
- --zone-product-heading-size: 30px;
1691
- --zone-product-heading-leading: 1.1;
1692
- --zone-product-heading-tracking: -1.5px;
1693
- --zone-product-heading-weight: 500;
1694
- --zone-marketing-body-size: 16px;
1695
- --zone-marketing-body-leading: 1.5;
1696
- --zone-marketing-body-weight: 400;
1697
- --zone-marketing-heading-size: 30px;
1698
- --zone-marketing-heading-leading: 1.1;
1699
- --zone-marketing-heading-tracking: -1.5px;
1700
- --zone-marketing-heading-weight: 450;
1701
- --zone-marketing-heading-lg-size: 56px;
1702
- --zone-marketing-heading-lg-leading: 1;
1703
- --zone-marketing-heading-lg-tracking: -3.36px;
1704
- --zone-marketing-heading-lg-weight: 450;
1705
- --zone-marketing-display-size: 64px;
1706
- --zone-marketing-display-leading: 1;
1707
- --zone-marketing-display-tracking: -3.84px;
1708
- --zone-marketing-display-weight: 450;
1137
+ /* Motion */
1138
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
1139
+ --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
1140
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
1141
+ --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
1142
+ --duration-micro: 100ms;
1143
+ --motion-duration-micro: 100ms;
1144
+ --duration-flow: 150ms;
1145
+ --motion-duration-flow: 150ms;
1146
+ --duration-reveal: 200ms;
1147
+ --motion-duration-reveal: 200ms;
1148
+ --duration-cinematic: 300ms;
1149
+ --motion-duration-cinematic: 300ms;
1150
+
1151
+ /* Spacing */
1152
+ --space-source-xs: 0.5rem;
1153
+ --space-source-sm: 0.75rem;
1154
+ --space-source-md: 1rem;
1155
+ --space-source-lg: 1.5rem;
1156
+ --space-source-xl: 2rem;
1157
+ --space-source-2xl: 3rem;
1709
1158
 
1710
1159
  /* Taxonomy / decorative (not product CTA) */
1711
1160
  --brand-category-carbon: #000000;
@@ -1766,79 +1215,3 @@ html.dark[data-brand="vercel"] {
1766
1215
  --brand-gradient-vertical: hsl(var(--primary));
1767
1216
  --brand-gradient-radial: hsl(var(--primary));
1768
1217
  }
1769
-
1770
- /* Zone: product — product never inherits marketing display */
1771
- [data-zone="product"],
1772
- .zone-product {
1773
- font-size: var(--zone-product-body-size, 16px);
1774
- line-height: var(--zone-product-body-leading, 1.5);
1775
- font-weight: var(--zone-product-body-weight, 400);
1776
- --text-caption: var(--zone-product-caption-size, inherit);
1777
- --leading-caption: var(--zone-product-caption-leading, inherit);
1778
- --tracking-caption: var(--zone-product-caption-tracking, inherit);
1779
- --text-body-sm: var(--zone-product-body-sm-size, inherit);
1780
- --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
1781
- --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
1782
- --text-body: var(--zone-product-body-size, inherit);
1783
- --leading-body: var(--zone-product-body-leading, inherit);
1784
- --tracking-body: var(--zone-product-body-tracking, inherit);
1785
- --text-body-lg: var(--zone-product-body-lg-size, inherit);
1786
- --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
1787
- --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
1788
- --text-subheading: var(--zone-product-subheading-size, inherit);
1789
- --leading-subheading: var(--zone-product-subheading-leading, inherit);
1790
- --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
1791
- --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
1792
- --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
1793
- --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
1794
- --text-heading: var(--zone-product-heading-size, inherit);
1795
- --leading-heading: var(--zone-product-heading-leading, inherit);
1796
- --tracking-heading: var(--zone-product-heading-tracking, inherit);
1797
- --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
1798
- --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
1799
- --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
1800
- --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
1801
- --leading-display: var(--zone-product-display-leading, inherit);
1802
- --tracking-display: var(--zone-product-display-tracking, inherit);
1803
- }
1804
-
1805
- /* Zone: marketing — product never inherits marketing display */
1806
- [data-zone="marketing"],
1807
- .zone-marketing {
1808
- font-size: var(--zone-marketing-body-size, 16px);
1809
- line-height: var(--zone-marketing-body-leading, 1.5);
1810
- font-weight: var(--zone-marketing-body-weight, 400);
1811
- --text-caption: var(--zone-marketing-caption-size, inherit);
1812
- --leading-caption: var(--zone-marketing-caption-leading, inherit);
1813
- --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
1814
- --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
1815
- --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
1816
- --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
1817
- --text-body: var(--zone-marketing-body-size, inherit);
1818
- --leading-body: var(--zone-marketing-body-leading, inherit);
1819
- --tracking-body: var(--zone-marketing-body-tracking, inherit);
1820
- --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
1821
- --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
1822
- --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
1823
- --text-subheading: var(--zone-marketing-subheading-size, inherit);
1824
- --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
1825
- --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
1826
- --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
1827
- --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
1828
- --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
1829
- --text-heading: var(--zone-marketing-heading-size, inherit);
1830
- --leading-heading: var(--zone-marketing-heading-leading, inherit);
1831
- --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
1832
- --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
1833
- --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
1834
- --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
1835
- --text-display: var(--zone-marketing-display-size, inherit);
1836
- --leading-display: var(--zone-marketing-display-leading, inherit);
1837
- --tracking-display: var(--zone-marketing-display-tracking, inherit);
1838
- }
1839
-
1840
- /* Product chrome must not use decorative gradients as action fills */
1841
- [data-zone="product"] .btn-brand-default,
1842
- .zone-product .btn-brand-default {
1843
- /* intentional no-op: documents contract; action uses --primary only */
1844
- }