ui-style-kit-css 2.4.0 → 2.5.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 (65) hide show
  1. package/CHANGELOG.md +63 -0
  2. package/README.md +47 -19
  3. package/STYLE-MAP.md +5 -0
  4. package/dist/ui-style-kit.css +1102 -616
  5. package/dist/ui-style-kit.min.css +2 -2
  6. package/dist/ui-style-kit.visual.css +1102 -616
  7. package/dist/ui-style-kit.visual.min.css +2 -2
  8. package/dist/ui-style-kit.with-bridge.css +1102 -616
  9. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  10. package/dist/visual/art-deco.css +539 -65
  11. package/dist/visual/bauhaus.css +2 -2
  12. package/dist/visual/bento.css +2 -2
  13. package/dist/visual/brutalism.css +499 -10
  14. package/dist/visual/clay.css +2 -2
  15. package/dist/visual/cyberpunk.css +535 -46
  16. package/dist/visual/data-terminal.css +516 -27
  17. package/dist/visual/editorial-luxe.css +526 -37
  18. package/dist/visual/industrial-utility.css +531 -42
  19. package/dist/visual/maximalist.css +496 -7
  20. package/dist/visual/minimal-saas.css +511 -21
  21. package/dist/visual/neo-noir.css +2 -2
  22. package/dist/visual/neumorphism.css +500 -11
  23. package/dist/visual/organic-modern.css +2 -2
  24. package/dist/visual/paper-editorial.css +537 -48
  25. package/dist/visual/retro-glass.css +534 -45
  26. package/dist/visual/retrofuturism.css +500 -11
  27. package/dist/visual/tactile.css +499 -10
  28. package/dist/visual/technical-blueprint.css +552 -63
  29. package/dist/visual/y2k.css +514 -13
  30. package/docs/BAUHAUS.md +1 -1
  31. package/docs/BRIDGE-MIGRATION.md +38 -0
  32. package/docs/CLAY.md +1 -1
  33. package/docs/COLOR-THEMES.md +63 -0
  34. package/docs/ECOSYSTEM.md +7 -7
  35. package/docs/ORGANIC-MODERN.md +1 -1
  36. package/docs/PUBLISHING.md +13 -13
  37. package/docs/RELEASE-2.4.1.md +35 -0
  38. package/docs/RELEASE-2.4.2.md +37 -0
  39. package/docs/RELEASE-2.5.0.md +34 -0
  40. package/docs/STYLE-GUIDE.md +1 -1
  41. package/manifest.json +358 -160
  42. package/package.json +6 -5
  43. package/styles/art-deco.css +10 -27
  44. package/styles/bauhaus.css +12 -12
  45. package/styles/bento.css +37 -31
  46. package/styles/brutalism.css +5 -5
  47. package/styles/clay.css +5 -5
  48. package/styles/components.css +81 -2
  49. package/styles/cyberpunk.css +14 -14
  50. package/styles/data-terminal.css +12 -12
  51. package/styles/editorial-luxe.css +6 -6
  52. package/styles/industrial-utility.css +5 -5
  53. package/styles/maximalist.css +2 -2
  54. package/styles/minimal-saas.css +13 -12
  55. package/styles/native-elements.css +1 -1
  56. package/styles/neo-noir.css +8 -8
  57. package/styles/neumorphism.css +6 -6
  58. package/styles/organic-modern.css +8 -9
  59. package/styles/paper-editorial.css +6 -6
  60. package/styles/retro-glass.css +5 -5
  61. package/styles/retrofuturism.css +6 -6
  62. package/styles/tactile.css +7 -7
  63. package/styles/technical-blueprint.css +18 -18
  64. package/styles/theme-colors.css +410 -0
  65. package/styles/y2k.css +22 -8
@@ -386,7 +386,7 @@
386
386
  .saas-title, .saas-heading, .saas-kicker, .saas-button, .saas-badge, .saas-nav-link { font-family: var(--saas-font-heading); }
387
387
  .saas-title { margin: 0; color: var(--saas-text); font-size: 1.5rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
388
388
  .saas-heading { margin: 0; color: var(--saas-text); font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
389
- .saas-kicker { margin: 0; color: var(--saas-primary); font-size: .78rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
389
+ .saas-kicker { margin: 0; color: var(--usk-primary-ink, var(--saas-primary)); font-size: .78rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
390
390
  .saas-subtitle, .saas-copy { margin: 0; color: var(--saas-text-muted); line-height: 1.55; }
391
391
  .saas-text-muted { color: var(--saas-text-muted); }
392
392
  .saas-divider { width: 100%; height: 1px; border: 0; background: var(--saas-border); }
@@ -426,10 +426,10 @@
426
426
  .saas-button:active, .saas-icon-button:active, .saas-button[aria-pressed="true"], .saas-icon-button[aria-pressed="true"], .saas-button.is-active, .saas-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgb(var(--saas-text-rgb) / .12); }
427
427
  .saas-button-primary { background: linear-gradient(135deg, var(--saas-primary), var(--saas-brand-2)); color: var(--saas-on-primary); border-color: var(--saas-primary); }
428
428
  .saas-button-primary:hover { background: linear-gradient(135deg, var(--saas-brand-2), var(--saas-primary)); border-color: var(--saas-primary-hover); }
429
- .saas-button-secondary { background: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha)); color: var(--saas-primary); border-color: rgb(var(--saas-primary-rgb) / .32); box-shadow: none; }
429
+ .saas-button-secondary { background: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha)); color: var(--usk-primary-ink, var(--saas-primary)); border-color: rgb(var(--saas-primary-rgb) / .32); box-shadow: none; }
430
430
  .saas-button-secondary:hover { background: rgb(var(--saas-primary-rgb) / .06); border-color: rgb(var(--saas-primary-rgb) / .52); }
431
431
  .saas-button-danger { background: var(--saas-danger); color: var(--saas-on-danger); border-color: var(--saas-danger); }
432
- .saas-button-ghost { background: transparent; color: var(--saas-primary); border-color: transparent; box-shadow: none; }
432
+ .saas-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--saas-primary)); border-color: transparent; box-shadow: none; }
433
433
  .saas-icon-button { width: 2.375rem; padding: 0; border-radius: var(--saas-radius-md); }
434
434
  .saas-button:disabled, .saas-icon-button:disabled, .saas-disabled { opacity: .55; cursor: not-allowed; transform: none; }
435
435
 
@@ -495,7 +495,7 @@
495
495
 
496
496
  .saas-badge { display: inline-flex; align-items: center; gap: var(--saas-space-1); min-height: 1.4rem; padding: .25rem .5rem; background: var(--saas-surface-soft); color: var(--saas-text); border: 1px solid transparent; border-radius: var(--saas-radius-sm); font-size: .75rem; font-weight: 700; line-height: 1; }
497
497
  .saas-badge-primary { background: var(--saas-primary); color: var(--saas-on-primary); border-color: var(--saas-primary); }
498
- .saas-badge-secondary { background: rgb(var(--saas-primary-rgb) / .1); color: var(--saas-primary); border-color: transparent; }
498
+ .saas-badge-secondary { background: rgb(var(--saas-primary-rgb) / .1); color: var(--usk-primary-ink, var(--saas-primary)); border-color: transparent; }
499
499
  .saas-badge-success { background: rgb(var(--saas-success-rgb) / .14); color: var(--saas-text); border-color: rgb(var(--saas-success-rgb) / .38); }
500
500
  .saas-badge-warning { background: rgb(var(--saas-warning-rgb) / .14); color: var(--saas-text); border-color: rgb(var(--saas-warning-rgb) / .38); }
501
501
  .saas-badge-danger { background: rgb(var(--saas-danger-rgb) / .14); color: var(--saas-text); border-color: rgb(var(--saas-danger-rgb) / .38); }
@@ -520,8 +520,9 @@
520
520
  .saas-alert-success { background: rgb(var(--saas-success-rgb) / .12); border-color: rgb(var(--saas-success-rgb) / .58); }
521
521
  .saas-alert-warning { background: rgb(var(--saas-warning-rgb) / .12); border-color: rgb(var(--saas-warning-rgb) / .58); }
522
522
  .saas-alert-danger { background: rgb(var(--saas-danger-rgb) / .12); border-color: rgb(var(--saas-danger-rgb) / .58); }
523
- .saas-alert-title { margin: 0; font-weight: 900; }
524
- .saas-alert-body { margin: 0; color: var(--saas-text-muted); line-height: 1.55; }
523
+ /** Keeps classed alert copy readable above the native paragraph color layer. */
524
+ .saas-alert-title { margin: 0; color: var(--saas-text); font-weight: 900; }
525
+ .saas-alert-body { margin: 0; color: var(--saas-text); line-height: 1.55; }
525
526
 
526
527
  .saas-table-wrap { overflow: auto; }
527
528
  .saas-table { width: 100%; border-collapse: collapse; }
@@ -534,7 +535,7 @@
534
535
  Utilities
535
536
  ========================================================= */
536
537
 
537
- .saas-text-primary { color: var(--saas-primary); } .saas-text-secondary { color: var(--saas-secondary); } .saas-text-accent { color: var(--saas-accent); } .saas-text-success { color: var(--saas-success); } .saas-text-warning { color: var(--saas-warning); } .saas-text-danger { color: var(--saas-danger); }
538
+ .saas-text-primary { color: var(--usk-primary-ink, var(--saas-primary)); } .saas-text-secondary { color: var(--saas-secondary); } .saas-text-accent { color: var(--usk-accent-ink, var(--saas-accent)); } .saas-text-success { color: var(--saas-success); } .saas-text-warning { color: var(--saas-warning); } .saas-text-danger { color: var(--saas-danger); }
538
539
  .saas-bg-primary { background: var(--saas-primary); color: var(--saas-on-primary); } .saas-bg-secondary { background: var(--saas-secondary); color: var(--saas-on-secondary); }
539
540
  .saas-border { border: 1px solid var(--saas-border); } .saas-rounded { border-radius: var(--saas-radius-md); } .saas-rounded-lg { border-radius: var(--saas-radius-lg); } .saas-rounded-xl { border-radius: var(--saas-radius-xl); } .saas-pill { border-radius: var(--saas-radius-pill); }
540
541
  .saas-sr-only, .saas-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@@ -642,7 +643,7 @@
642
643
  .saas-button.saas-button-outline-heavy,
643
644
  .saas-button-outline-heavy {
644
645
  background: transparent;
645
- color: var(--saas-primary);
646
+ color: var(--usk-primary-ink, var(--saas-primary));
646
647
  border-style: solid;
647
648
  border-width: 2px;
648
649
  border-color: var(--saas-primary);
@@ -712,7 +713,7 @@
712
713
 
713
714
  .saas-eyebrow {
714
715
  margin: 0;
715
- color: var(--saas-primary);
716
+ color: var(--usk-primary-ink, var(--saas-primary));
716
717
  font-family: var(--saas-font-heading);
717
718
  font-size: .76rem;
718
719
  font-weight: 900;
@@ -761,7 +762,7 @@
761
762
  .saas-card-accent-edge { border-inline-start-width: .16rem; }
762
763
  .saas-icon-medallion {
763
764
  background: var(--saas-surface-soft);
764
- color: var(--saas-primary);
765
+ color: var(--usk-primary-ink, var(--saas-primary));
765
766
  border: 1px solid var(--saas-border);
766
767
  border-radius: var(--saas-radius-lg);
767
768
  box-shadow: var(--saas-shadow-sm);
@@ -965,9 +966,9 @@
965
966
  @layer ui-style-kit.minimal_saas {
966
967
  /** Restores source-faithful action hierarchy after identity geometry. */
967
968
  .saas-button-primary { background: linear-gradient(135deg, var(--saas-primary), var(--saas-brand-2)); color: var(--saas-on-primary); border-color: var(--saas-primary); }
968
- .saas-button-secondary { background: var(--saas-surface); color: var(--saas-primary); border-color: var(--saas-primary); }
969
+ .saas-button-secondary { background: var(--saas-surface); color: var(--usk-primary-ink, var(--saas-primary)); border-color: var(--saas-primary); }
969
970
  .saas-button-danger { background: var(--saas-danger); color: var(--saas-on-danger); border-color: var(--saas-danger); }
970
- .saas-button-ghost { background: transparent; color: var(--saas-primary); border-color: transparent; }
971
+ .saas-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--saas-primary)); border-color: transparent; }
971
972
  }
972
973
 
973
974
  @layer ui-style-kit.minimal_saas {
@@ -145,7 +145,7 @@
145
145
  text-underline-offset: .18em;
146
146
  }
147
147
 
148
- [data-ui][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
148
+ [data-ui][data-mode] :where(a:hover) { color: var(--usk-primary-ink, var(--usk-native-primary-hover)); }
149
149
 
150
150
  [data-ui][data-mode] :where(ul, ol, menu) {
151
151
  margin: 0 0 1rem;
@@ -379,7 +379,7 @@
379
379
  .noir-title, .noir-heading, .noir-kicker, .noir-button, .noir-badge, .noir-nav-link { font-family: var(--noir-font-heading); }
380
380
  .noir-title { margin: 0; color: var(--noir-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
381
381
  .noir-heading { margin: 0; color: var(--noir-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
382
- .noir-kicker { margin: 0; color: var(--noir-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
382
+ .noir-kicker { margin: 0; color: var(--usk-primary-ink, var(--noir-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
383
383
  .noir-subtitle, .noir-copy { margin: 0; color: var(--noir-text-muted); line-height: 1.65; }
384
384
  .noir-text-muted { color: var(--noir-text-muted); }
385
385
  .noir-divider { width: 100%; height: 1px; border: 0; background: var(--noir-border); }
@@ -513,7 +513,7 @@
513
513
  Utilities
514
514
  ========================================================= */
515
515
 
516
- .noir-text-primary { color: var(--noir-primary); } .noir-text-secondary { color: var(--noir-secondary); } .noir-text-accent { color: var(--noir-accent); } .noir-text-success { color: var(--noir-success); } .noir-text-warning { color: var(--noir-warning); } .noir-text-danger { color: var(--noir-danger); }
516
+ .noir-text-primary { color: var(--usk-primary-ink, var(--noir-primary)); } .noir-text-secondary { color: var(--noir-secondary); } .noir-text-accent { color: var(--usk-accent-ink, var(--noir-accent)); } .noir-text-success { color: var(--noir-success); } .noir-text-warning { color: var(--noir-warning); } .noir-text-danger { color: var(--noir-danger); }
517
517
  .noir-bg-primary { background: var(--noir-primary); color: var(--noir-on-primary); } .noir-bg-secondary { background: var(--noir-secondary); color: var(--noir-on-secondary); }
518
518
  .noir-border { border: 1px solid var(--noir-border); } .noir-rounded { border-radius: var(--noir-radius-md); } .noir-rounded-lg { border-radius: var(--noir-radius-lg); } .noir-rounded-xl { border-radius: var(--noir-radius-xl); } .noir-pill { border-radius: var(--noir-radius-pill); }
519
519
  .noir-sr-only, .noir-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@@ -621,7 +621,7 @@
621
621
  .noir-button.noir-button-outline-heavy,
622
622
  .noir-button-outline-heavy {
623
623
  background: transparent;
624
- color: var(--noir-primary);
624
+ color: var(--usk-primary-ink, var(--noir-primary));
625
625
  border-style: solid;
626
626
  border-width: 2px;
627
627
  border-color: var(--noir-primary);
@@ -691,7 +691,7 @@
691
691
 
692
692
  .noir-eyebrow {
693
693
  margin: 0;
694
- color: var(--noir-primary);
694
+ color: var(--usk-primary-ink, var(--noir-primary));
695
695
  font-family: var(--noir-font-heading);
696
696
  font-size: .76rem;
697
697
  font-weight: 900;
@@ -770,7 +770,7 @@
770
770
  .noir-input, .noir-textarea, .noir-select { background: rgb(var(--noir-surface-strong-rgb) / .68); }
771
771
  .noir-card-media { border-color: rgb(var(--noir-primary-rgb) / .25); }
772
772
  .noir-media-scrim > :where(figcaption, [data-media-caption]) { background: linear-gradient(to top, rgb(0 0 0 / .96), rgb(var(--noir-primary-rgb) / .18) 54%, transparent); }
773
- .noir-icon-medallion { background: transparent; color: var(--noir-primary); border-color: var(--noir-primary); box-shadow: 0 0 1.2rem rgb(var(--noir-primary-rgb) / .18); }
773
+ .noir-icon-medallion { background: transparent; color: var(--usk-primary-ink, var(--noir-primary)); border-color: var(--noir-primary); box-shadow: 0 0 1.2rem rgb(var(--noir-primary-rgb) / .18); }
774
774
  .noir-badge-seal { background: transparent; border-color: var(--noir-primary); }
775
775
  .noir-card-accent-edge { border-inline-start-color: var(--noir-primary); }
776
776
  [data-ui="neo-noir"][data-mode="contrast"] :where(.noir-surface, .noir-card, .noir-panel, .noir-toolbar, .noir-table-wrap, .noir-icon-medallion) { box-shadow: none; text-shadow: none; }
@@ -931,7 +931,7 @@
931
931
  .noir-button-primary { background: linear-gradient(112deg, var(--noir-warning), var(--noir-primary)); color: var(--noir-on-primary); border-color: var(--noir-warning); }
932
932
  .noir-button-secondary { background: linear-gradient(112deg, var(--noir-secondary), var(--noir-focus)); color: var(--noir-on-secondary); border-color: var(--noir-focus); }
933
933
  .noir-button-danger { background: linear-gradient(112deg, var(--noir-danger), rgb(var(--noir-danger-rgb) / .68)); color: var(--noir-on-danger); border-color: var(--noir-danger); }
934
- .noir-button-ghost { background: transparent; color: var(--noir-primary); border-color: transparent; }
934
+ .noir-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--noir-primary)); border-color: transparent; }
935
935
  }
936
936
 
937
937
  @layer ui-style-kit.neo_noir {
@@ -1152,7 +1152,7 @@
1152
1152
  .noir-badge-success { color: var(--noir-success); background: transparent; }
1153
1153
  .noir-badge-warning { color: var(--noir-warning); background: transparent; }
1154
1154
  .noir-badge-danger { color: var(--noir-danger); background: transparent; }
1155
- .noir-badge-review { color: var(--noir-accent); }
1155
+ .noir-badge-review { color: var(--usk-accent-ink, var(--noir-accent)); }
1156
1156
  .noir-alert { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .65rem; background: var(--noir-surface); color: var(--noir-text); border: 1px solid var(--noir-secondary); border-radius: 0; box-shadow: none; font: 11px var(--noir-font-mono); }
1157
1157
  .noir-alert-success { color: var(--noir-success); border-color: currentColor; }
1158
1158
  .noir-alert-warning { color: var(--noir-warning); border-color: currentColor; }
@@ -1172,7 +1172,7 @@
1172
1172
  .noir-tooltip-right::after { inset: auto; left: -5px; top: calc(50% - 4px); transform: rotate(135deg); }
1173
1173
  .noir-tooltip-bottom::after { inset: auto; top: -5px; left: calc(50% - 4px); transform: rotate(225deg); }
1174
1174
  .noir-tooltip-left::after { inset: auto; right: -5px; top: calc(50% - 4px); transform: rotate(-45deg); }
1175
- .noir-processing { display: grid; align-content: center; justify-items: center; gap: .4rem; padding: 1rem; min-height: 110px; border: 1px solid var(--noir-accent); color: var(--noir-accent); font: 12px var(--noir-font-control); }
1175
+ .noir-processing { display: grid; align-content: center; justify-items: center; gap: .4rem; padding: 1rem; min-height: 110px; border: 1px solid var(--noir-accent); color: var(--usk-accent-ink, var(--noir-accent)); font: 12px var(--noir-font-control); }
1176
1176
  [data-ui="neo-noir"] .noir-processing strong { font: 400 28px var(--noir-font-display); color: inherit; }
1177
1177
  .noir-processing::after { content: ""; width: 60%; height: 2px; background: currentColor; animation: noir-pulse 1.5s ease-in-out infinite alternate; }
1178
1178
  /** A fixed registration ring surrounds rotating aperture blades without layout movement. */
@@ -383,7 +383,7 @@
383
383
  .neo-title, .neo-heading, .neo-kicker, .neo-button, .neo-badge, .neo-nav-link { font-family: var(--neo-font-heading); }
384
384
  .neo-title { margin: 0; color: var(--neo-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
385
385
  .neo-heading { margin: 0; color: var(--neo-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
386
- .neo-kicker { margin: 0; color: var(--neo-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
386
+ .neo-kicker { margin: 0; color: var(--usk-primary-ink, var(--neo-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
387
387
  .neo-subtitle, .neo-copy { margin: 0; color: var(--neo-text-muted); line-height: 1.65; }
388
388
  .neo-text-muted { color: var(--neo-text-muted); }
389
389
  .neo-divider { width: 100%; height: 1px; border: 0; background: var(--neo-border); }
@@ -518,7 +518,7 @@
518
518
  Utilities
519
519
  ========================================================= */
520
520
 
521
- .neo-text-primary { color: var(--neo-primary); } .neo-text-secondary { color: var(--neo-secondary); } .neo-text-accent { color: var(--neo-accent); } .neo-text-success { color: var(--neo-success); } .neo-text-warning { color: var(--neo-warning); } .neo-text-danger { color: var(--neo-danger); }
521
+ .neo-text-primary { color: var(--usk-primary-ink, var(--neo-primary)); } .neo-text-secondary { color: var(--neo-secondary); } .neo-text-accent { color: var(--usk-accent-ink, var(--neo-accent)); } .neo-text-success { color: var(--neo-success); } .neo-text-warning { color: var(--neo-warning); } .neo-text-danger { color: var(--neo-danger); }
522
522
  .neo-bg-primary { background: var(--neo-primary); color: var(--neo-on-primary); } .neo-bg-secondary { background: var(--neo-secondary); color: var(--neo-on-secondary); }
523
523
  .neo-border { border: 1px solid var(--neo-border); } .neo-rounded { border-radius: var(--neo-radius-md); } .neo-rounded-lg { border-radius: var(--neo-radius-lg); } .neo-rounded-xl { border-radius: var(--neo-radius-xl); } .neo-pill { border-radius: var(--neo-radius-pill); }
524
524
  .neo-sr-only, .neo-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@@ -854,7 +854,7 @@
854
854
  .neo-button-outline-heavy {
855
855
  background-color: var(--neo-material-raised);
856
856
  background-image: linear-gradient(145deg, var(--neo-material-top-light), transparent 52%);
857
- color: var(--neo-primary);
857
+ color: var(--usk-primary-ink, var(--neo-primary));
858
858
  border: 1px solid var(--neo-material-edge);
859
859
  border-radius: var(--neo-radius-md);
860
860
  box-shadow: var(--neo-button-shadow);
@@ -862,7 +862,7 @@
862
862
 
863
863
  .neo-button.neo-button-outline-heavy:hover,
864
864
  .neo-button-outline-heavy:hover {
865
- color: var(--neo-primary-hover);
865
+ color: var(--usk-primary-ink, var(--neo-primary-hover));
866
866
  border-color: var(--neo-primary);
867
867
  }
868
868
 
@@ -1252,7 +1252,7 @@
1252
1252
  padding: .7rem;
1253
1253
  background-color: var(--neo-material-raised);
1254
1254
  background-image: linear-gradient(145deg, var(--neo-material-top-light), transparent 52%);
1255
- color: var(--neo-primary);
1255
+ color: var(--usk-primary-ink, var(--neo-primary));
1256
1256
  border: 1px solid var(--neo-material-edge);
1257
1257
  border-radius: var(--neo-radius-lg);
1258
1258
  box-shadow: var(--neo-button-shadow);
@@ -1344,7 +1344,7 @@
1344
1344
 
1345
1345
  .neo-eyebrow {
1346
1346
  margin: 0;
1347
- color: var(--neo-primary);
1347
+ color: var(--usk-primary-ink, var(--neo-primary));
1348
1348
  font-family: var(--neo-font-heading);
1349
1349
  font-size: .76rem;
1350
1350
  font-weight: 900;
@@ -380,7 +380,7 @@
380
380
  .organic-title, .organic-heading, .organic-kicker, .organic-button, .organic-badge, .organic-nav-link { font-family: var(--organic-font-heading); }
381
381
  .organic-title { margin: 0; color: var(--organic-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
382
382
  .organic-heading { margin: 0; color: var(--organic-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
383
- .organic-kicker { margin: 0; color: var(--organic-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
383
+ .organic-kicker { margin: 0; color: var(--usk-primary-ink, var(--organic-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
384
384
  .organic-subtitle, .organic-copy { margin: 0; color: var(--organic-text-muted); line-height: 1.65; }
385
385
  .organic-text-muted { color: var(--organic-text-muted); }
386
386
  .organic-divider { width: 100%; height: 1px; border: 0; background: var(--organic-border); }
@@ -514,7 +514,7 @@
514
514
  Utilities
515
515
  ========================================================= */
516
516
 
517
- .organic-text-primary { color: var(--organic-primary); } .organic-text-secondary { color: var(--organic-secondary); } .organic-text-accent { color: var(--organic-accent); } .organic-text-success { color: var(--organic-success); } .organic-text-warning { color: var(--organic-warning); } .organic-text-danger { color: var(--organic-danger); }
517
+ .organic-text-primary { color: var(--usk-primary-ink, var(--organic-primary)); } .organic-text-secondary { color: var(--organic-secondary); } .organic-text-accent { color: var(--usk-accent-ink, var(--organic-accent)); } .organic-text-success { color: var(--organic-success); } .organic-text-warning { color: var(--organic-warning); } .organic-text-danger { color: var(--organic-danger); }
518
518
  .organic-bg-primary { background: var(--organic-primary); color: var(--organic-on-primary); } .organic-bg-secondary { background: var(--organic-secondary); color: var(--organic-on-secondary); }
519
519
  .organic-border { border: 1px solid var(--organic-border); } .organic-rounded { border-radius: var(--organic-radius-md); } .organic-rounded-lg { border-radius: var(--organic-radius-lg); } .organic-rounded-xl { border-radius: var(--organic-radius-xl); } .organic-pill { border-radius: var(--organic-radius-pill); }
520
520
  .organic-sr-only, .organic-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@@ -622,7 +622,7 @@
622
622
  .organic-button.organic-button-outline-heavy,
623
623
  .organic-button-outline-heavy {
624
624
  background: transparent;
625
- color: var(--organic-primary);
625
+ color: var(--usk-primary-ink, var(--organic-primary));
626
626
  border-style: solid;
627
627
  border-width: 2px;
628
628
  border-color: var(--organic-primary);
@@ -692,7 +692,7 @@
692
692
 
693
693
  .organic-eyebrow {
694
694
  margin: 0;
695
- color: var(--organic-primary);
695
+ color: var(--usk-primary-ink, var(--organic-primary));
696
696
  font-family: var(--organic-font-heading);
697
697
  font-size: .76rem;
698
698
  font-weight: 900;
@@ -768,7 +768,7 @@
768
768
  .organic-input, .organic-textarea, .organic-select { border-radius: var(--organic-radius-lg); }
769
769
  .organic-card-media { border-radius: 42% 58% 36% 64% / 50% 36% 64% 50%; }
770
770
  .organic-media-scrim { border-radius: 2.8rem 1.2rem 3.2rem 1.8rem; }
771
- .organic-icon-medallion { border-radius: 46% 54% 43% 57% / 56% 43% 57% 44%; background: rgb(var(--organic-primary-rgb) / .14); color: var(--organic-primary); border-color: rgb(var(--organic-primary-rgb) / .3); box-shadow: 0 .5rem 1.4rem rgb(var(--organic-primary-rgb) / .12); }
771
+ .organic-icon-medallion { border-radius: 46% 54% 43% 57% / 56% 43% 57% 44%; background: rgb(var(--organic-primary-rgb) / .14); color: var(--usk-primary-ink, var(--organic-primary)); border-color: rgb(var(--organic-primary-rgb) / .3); box-shadow: 0 .5rem 1.4rem rgb(var(--organic-primary-rgb) / .12); }
772
772
  .organic-badge-seal { border-radius: 45% 55% 48% 52% / 55% 44% 56% 45%; }
773
773
  .organic-feature-strip, .organic-callout-bar { border-radius: 2.2rem 1.35rem 2.5rem 1.5rem; }
774
774
  .organic-card-accent-edge { border-inline-start: 0; background: linear-gradient(100deg, rgb(var(--organic-primary-rgb) / .11), transparent 38%), var(--organic-card-bg); }
@@ -985,7 +985,7 @@
985
985
  .organic-button-primary { background: var(--organic-primary); color: var(--organic-on-primary); border-color: var(--organic-primary); }
986
986
  .organic-button-secondary { background: var(--organic-secondary); color: var(--organic-on-secondary); border-color: var(--organic-secondary); }
987
987
  .organic-button-danger { background: var(--organic-danger); color: var(--organic-on-danger); border-color: var(--organic-danger); }
988
- .organic-button-ghost { background: transparent; color: var(--organic-primary); border-color: transparent; }
988
+ .organic-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--organic-primary)); border-color: transparent; }
989
989
  }
990
990
 
991
991
  @layer ui-style-kit.organic_modern {
@@ -1044,7 +1044,6 @@
1044
1044
  --usk-native-progress-track-radius: 99px;
1045
1045
  --usk-native-progress-value-background: var(--organic-primary);
1046
1046
  --usk-native-progress-value-radius: 99px;
1047
- --usk-native-select-indicator-image: none;
1048
1047
  background: var(--organic-bg);
1049
1048
  color: var(--organic-text);
1050
1049
  font-family: var(--organic-font-sans);
@@ -1124,7 +1123,7 @@
1124
1123
  .organic-masthead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 8px 4px 20px; border-bottom: 1px solid var(--organic-border); }
1125
1124
  .organic-brand { display: flex; gap: 12px; align-items: center; }
1126
1125
  .organic-brand strong { display: block; font: 500 30px/1 var(--organic-font-display); }
1127
- .organic-brand .organic-icon { color: var(--organic-accent); width: 30px; height: 30px; }
1126
+ .organic-brand .organic-icon { color: var(--usk-accent-ink, var(--organic-accent)); width: 30px; height: 30px; }
1128
1127
  .organic-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
1129
1128
  .organic-section-heading :where(h3, h4), .organic-section-heading { font-family: var(--organic-font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; }
1130
1129
  .organic-workspace { display: grid; grid-template-columns: minmax(170px, .75fr) minmax(0, 2.7fr) minmax(0, 2.25fr); gap: 12px; padding-top: 12px; }
@@ -1170,7 +1169,7 @@
1170
1169
  .organic-performance meter { width: 100%; }
1171
1170
  .organic-notices { display: flex; gap: 12px; flex-wrap: wrap; }
1172
1171
  .organic-notice { display: flex; flex: 1 1 130px; gap: 10px; padding: 12px; background: var(--organic-surface); border-radius: 8px; color: var(--organic-text); }
1173
- .organic-notice > .organic-icon { color: var(--organic-accent); }
1172
+ .organic-notice > .organic-icon { color: var(--usk-accent-ink, var(--organic-accent)); }
1174
1173
  .organic-notice small { display: block; margin-top: 4px; }
1175
1174
  .organic-add-material { padding: 16px; background: var(--organic-surface); border: 1px solid var(--organic-border); border-radius: 12px; }
1176
1175
  .organic-control-lab { padding: 16px; min-width: 0; background: var(--organic-surface); color: var(--organic-text); border: 1px solid var(--organic-border); border-radius: 14px 14px 14px 26px; box-shadow: var(--organic-quiet-shadow); }
@@ -379,7 +379,7 @@
379
379
  .paper-title, .paper-heading, .paper-kicker, .paper-button, .paper-badge, .paper-nav-link { font-family: var(--paper-font-heading); }
380
380
  .paper-title { margin: 0; color: var(--paper-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
381
381
  .paper-heading { margin: 0; color: var(--paper-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
382
- .paper-kicker { margin: 0; color: var(--paper-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
382
+ .paper-kicker { margin: 0; color: var(--usk-primary-ink, var(--paper-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
383
383
  .paper-subtitle, .paper-copy { margin: 0; color: var(--paper-text-muted); line-height: 1.65; }
384
384
  .paper-text-muted { color: var(--paper-text-muted); }
385
385
  .paper-divider { width: 100%; height: 1px; border: 0; background: var(--paper-border); }
@@ -513,7 +513,7 @@
513
513
  Utilities
514
514
  ========================================================= */
515
515
 
516
- .paper-text-primary { color: var(--paper-primary); } .paper-text-secondary { color: var(--paper-secondary); } .paper-text-accent { color: var(--paper-accent); } .paper-text-success { color: var(--paper-success); } .paper-text-warning { color: var(--paper-warning); } .paper-text-danger { color: var(--paper-danger); }
516
+ .paper-text-primary { color: var(--usk-primary-ink, var(--paper-primary)); } .paper-text-secondary { color: var(--paper-secondary); } .paper-text-accent { color: var(--usk-accent-ink, var(--paper-accent)); } .paper-text-success { color: var(--paper-success); } .paper-text-warning { color: var(--paper-warning); } .paper-text-danger { color: var(--paper-danger); }
517
517
  .paper-bg-primary { background: var(--paper-primary); color: var(--paper-on-primary); } .paper-bg-secondary { background: var(--paper-secondary); color: var(--paper-on-secondary); }
518
518
  .paper-border { border: 1px solid var(--paper-border); } .paper-rounded { border-radius: var(--paper-radius-md); } .paper-rounded-lg { border-radius: var(--paper-radius-lg); } .paper-rounded-xl { border-radius: var(--paper-radius-xl); } .paper-pill { border-radius: var(--paper-radius-pill); }
519
519
  .paper-sr-only, .paper-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@@ -621,7 +621,7 @@
621
621
  .paper-button.paper-button-outline-heavy,
622
622
  .paper-button-outline-heavy {
623
623
  background: transparent;
624
- color: var(--paper-primary);
624
+ color: var(--usk-primary-ink, var(--paper-primary));
625
625
  border-style: solid;
626
626
  border-width: 2px;
627
627
  border-color: var(--paper-primary);
@@ -691,7 +691,7 @@
691
691
 
692
692
  .paper-eyebrow {
693
693
  margin: 0;
694
- color: var(--paper-primary);
694
+ color: var(--usk-primary-ink, var(--paper-primary));
695
695
  font-family: var(--paper-font-heading);
696
696
  font-size: .76rem;
697
697
  font-weight: 900;
@@ -771,7 +771,7 @@
771
771
  .paper-card-media, .paper-media-scrim { border-radius: 0; filter: grayscale(.72) contrast(1.04); }
772
772
  .paper-feature-strip, .paper-callout-bar { border-radius: 0; }
773
773
  .paper-icon-medallion { background: transparent; color: var(--paper-text); border: 1px solid var(--paper-text); box-shadow: none; }
774
- .paper-badge-seal { border-radius: 50%; border-style: double; border-width: 4px; background: transparent; color: var(--paper-primary); transform: rotate(-4deg); }
774
+ .paper-badge-seal { border-radius: 50%; border-style: double; border-width: 4px; background: transparent; color: var(--usk-primary-ink, var(--paper-primary)); transform: rotate(-4deg); }
775
775
  .paper-card-accent-edge { border-inline-start: 0; border-block-start: .2rem solid var(--paper-primary); }
776
776
  .paper-feature-item { align-items: start; }
777
777
 
@@ -945,7 +945,7 @@
945
945
  .paper-button-primary { background: var(--paper-primary); color: var(--paper-on-primary); border-color: var(--paper-primary); }
946
946
  .paper-button-secondary { background: var(--paper-secondary); color: var(--paper-on-secondary); border-color: var(--paper-secondary); }
947
947
  .paper-button-danger { background: var(--paper-danger); color: var(--paper-on-danger); border-color: var(--paper-danger); }
948
- .paper-button-ghost { background: transparent; color: var(--paper-primary); border-color: transparent; }
948
+ .paper-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--paper-primary)); border-color: transparent; }
949
949
  }
950
950
 
951
951
  @layer ui-style-kit.paper_editorial {
@@ -448,7 +448,7 @@
448
448
  [data-ui="retro-glass"] :where(a) { color: var(--rg-link); text-underline-offset: 0.18em; } [data-ui="retro-glass"] ::selection { background: var(--rg-primary); color: var(--rg-on-primary); }
449
449
 
450
450
  .rg-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); } .rg-container { width: min(100% - 2rem, 1200px); margin-inline: auto; } .rg-stack { display: flex; flex-direction: column; gap: var(--rg-space-4); } .rg-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rg-space-3); } .rg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--rg-space-5); } .rg-section { padding: clamp(1.25rem, 4vw, 2.5rem); }
451
- .rg-title, .rg-heading, .rg-kicker, .rg-button, .rg-badge, .rg-nav-link { font-family: var(--rg-font-heading); text-transform: uppercase; } .rg-title { margin: 0; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.02; letter-spacing: .06em; text-shadow: 0 0 14px var(--rg-glow-primary), 0 0 34px var(--rg-glow-accent); } .rg-heading { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: .06em; } .rg-kicker { margin: 0; color: var(--rg-primary); font-size: .8rem; font-weight: 900; letter-spacing: .18em; } .rg-subtitle, .rg-copy { margin: 0; color: var(--rg-text-muted); line-height: 1.65; } .rg-text-muted { color: var(--rg-text-muted); }
451
+ .rg-title, .rg-heading, .rg-kicker, .rg-button, .rg-badge, .rg-nav-link { font-family: var(--rg-font-heading); text-transform: uppercase; } .rg-title { margin: 0; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.02; letter-spacing: .06em; text-shadow: 0 0 14px var(--rg-glow-primary), 0 0 34px var(--rg-glow-accent); } .rg-heading { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: .06em; } .rg-kicker { margin: 0; color: var(--usk-primary-ink, var(--rg-primary)); font-size: .8rem; font-weight: 900; letter-spacing: .18em; } .rg-subtitle, .rg-copy { margin: 0; color: var(--rg-text-muted); line-height: 1.65; } .rg-text-muted { color: var(--rg-text-muted); }
452
452
 
453
453
  .rg-card, .rg-panel, .rg-console, .rg-toolbar, .rg-table-wrap { position: relative; background: linear-gradient(135deg, rgb(255 255 255 / .18), rgb(255 255 255 / .04)), linear-gradient(135deg, rgb(var(--rg-primary-rgb) / .06), transparent 52%), var(--rg-surface); color: var(--rg-text); border: 1px solid var(--rg-border); border-top-color: rgb(255 255 255 / .28); border-left-color: rgb(255 255 255 / .2); border-radius: var(--rg-radius-xl); box-shadow: var(--rg-shadow-md), 0 0 28px var(--rg-glow-primary); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); transition: transform var(--rg-transition-base), box-shadow var(--rg-transition-base), border-color var(--rg-transition-base); }
454
454
  .rg-card::before, .rg-panel::before, .rg-console::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / .1), transparent 30%), linear-gradient(90deg, transparent, rgb(var(--rg-accent-rgb) / .08), transparent); border-radius: inherit; } .rg-card, .rg-panel, .rg-console { padding: var(--rg-space-6); } .rg-console { border-radius: var(--rg-radius-lg); box-shadow: var(--rg-shadow-lg), inset 0 0 28px rgb(var(--rg-primary-rgb) / .08), 0 0 32px var(--rg-glow-primary); } .rg-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rg-space-4); padding: var(--rg-space-4); } .rg-hover-lift:hover { transform: translateY(-3px); border-color: rgb(var(--rg-primary-rgb) / .68); box-shadow: var(--rg-shadow-lg), 0 0 44px var(--rg-glow-primary), 0 0 60px var(--rg-glow-secondary); }
@@ -467,7 +467,7 @@
467
467
  .rg-progress { width: 100%; height: .9rem; background: var(--rg-surface-soft); border: 1px solid rgb(var(--rg-border-rgb) / .4); border-radius: var(--rg-radius-pill); box-shadow: inset 0 8px 18px rgb(0 0 0 / .14); overflow: hidden; } .rg-progress-bar { height: 100%; width: var(--rg-progress-value, 50%); background: linear-gradient(90deg, var(--rg-primary), var(--rg-accent), var(--rg-secondary)); border-radius: inherit; box-shadow: 0 0 18px var(--rg-glow-primary); }
468
468
  .rg-alert { padding: var(--rg-space-4); background: var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-lg); box-shadow: var(--rg-shadow-md), 0 0 22px var(--rg-glow-primary); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .rg-alert-title { margin: 0; font-family: var(--rg-font-heading); text-transform: uppercase; } .rg-alert-body { margin: .5rem 0 0; color: var(--rg-text-muted); } .rg-alert-success { border-left: 4px solid var(--rg-success); } .rg-alert-warning { border-left: 4px solid var(--rg-warning); } .rg-alert-danger { border-left: 4px solid var(--rg-danger); }
469
469
  .rg-table-wrap { overflow: auto; } .rg-table { width: 100%; border-collapse: collapse; } .rg-table th, .rg-table td { padding: .9rem 1rem; border-bottom: 1px solid rgb(var(--rg-border-rgb) / .34); text-align: left; } .rg-table th { background: rgb(var(--rg-primary-rgb) / .1); font-family: var(--rg-font-heading); text-transform: uppercase; letter-spacing: .1em; } .rg-table td { color: var(--rg-text-muted); }
470
- .rg-text-primary { color: var(--rg-primary); } .rg-text-secondary { color: var(--rg-secondary); } .rg-text-accent { color: var(--rg-accent); } .rg-text-success { color: var(--rg-success); } .rg-text-warning { color: var(--rg-warning); } .rg-text-danger { color: var(--rg-danger); }
470
+ .rg-text-primary { color: var(--usk-primary-ink, var(--rg-primary)); } .rg-text-secondary { color: var(--rg-secondary); } .rg-text-accent { color: var(--usk-accent-ink, var(--rg-accent)); } .rg-text-success { color: var(--rg-success); } .rg-text-warning { color: var(--rg-warning); } .rg-text-danger { color: var(--rg-danger); }
471
471
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-ui="retro-glass"] { --rg-panel-alpha: .96; --rg-panel-strong-alpha: 1; --rg-panel-soft-alpha: .9; } }
472
472
  [data-ui="retro-glass"] :focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; }
473
473
  @media (prefers-reduced-motion: reduce) { [data-ui="retro-glass"] *, [data-ui="retro-glass"] *::before, [data-ui="retro-glass"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
@@ -598,7 +598,7 @@
598
598
  .rg-button.rg-button-outline-heavy,
599
599
  .rg-button-outline-heavy {
600
600
  background: transparent;
601
- color: var(--rg-primary);
601
+ color: var(--usk-primary-ink, var(--rg-primary));
602
602
  border-style: solid;
603
603
  border-width: 2px;
604
604
  border-color: var(--rg-primary);
@@ -668,7 +668,7 @@
668
668
 
669
669
  .rg-eyebrow {
670
670
  margin: 0;
671
- color: var(--rg-primary);
671
+ color: var(--usk-primary-ink, var(--rg-primary));
672
672
  font-family: var(--rg-font-heading);
673
673
  font-size: .76rem;
674
674
  font-weight: 900;
@@ -907,7 +907,7 @@
907
907
  .rg-button-primary { background: linear-gradient(180deg, rgb(var(--rg-surface-strong-rgb) / .55), transparent 52%), var(--rg-primary); color: var(--rg-on-primary); border-color: var(--rg-primary); }
908
908
  .rg-button-secondary { background: linear-gradient(180deg, rgb(var(--rg-surface-strong-rgb) / .48), transparent 52%), var(--rg-secondary); color: var(--rg-on-secondary); border-color: var(--rg-secondary); }
909
909
  .rg-button-danger { background: linear-gradient(180deg, rgb(var(--rg-surface-strong-rgb) / .42), transparent 52%), var(--rg-danger); color: var(--rg-on-danger); border-color: var(--rg-danger); }
910
- .rg-button-ghost { background: transparent; color: var(--rg-primary); border-color: transparent; }
910
+ .rg-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--rg-primary)); border-color: transparent; }
911
911
  }
912
912
 
913
913
  @layer ui-style-kit.retro_glass {
@@ -380,7 +380,7 @@
380
380
  .retro-title, .retro-heading, .retro-kicker, .retro-button, .retro-badge, .retro-nav-link { font-family: var(--retro-font-heading); }
381
381
  .retro-title { margin: 0; color: var(--retro-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.055em; }
382
382
  .retro-heading { margin: 0; color: var(--retro-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
383
- .retro-kicker { margin: 0; color: var(--retro-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
383
+ .retro-kicker { margin: 0; color: var(--usk-primary-ink, var(--retro-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
384
384
  .retro-subtitle, .retro-copy { margin: 0; color: var(--retro-text-muted); line-height: 1.65; }
385
385
  .retro-text-muted { color: var(--retro-text-muted); }
386
386
  .retro-divider { width: 100%; height: 1px; border: 0; background: var(--retro-border); }
@@ -516,7 +516,7 @@
516
516
  Utilities
517
517
  ========================================================= */
518
518
 
519
- .retro-text-primary { color: var(--retro-primary); } .retro-text-secondary { color: var(--retro-secondary); } .retro-text-accent { color: var(--retro-accent); } .retro-text-success { color: var(--retro-success); } .retro-text-warning { color: var(--retro-warning); } .retro-text-danger { color: var(--retro-danger); }
519
+ .retro-text-primary { color: var(--usk-primary-ink, var(--retro-primary)); } .retro-text-secondary { color: var(--retro-secondary); } .retro-text-accent { color: var(--usk-accent-ink, var(--retro-accent)); } .retro-text-success { color: var(--retro-success); } .retro-text-warning { color: var(--retro-warning); } .retro-text-danger { color: var(--retro-danger); }
520
520
  .retro-bg-primary { background: var(--retro-primary); color: var(--retro-on-primary); } .retro-bg-secondary { background: var(--retro-secondary); color: var(--retro-on-secondary); }
521
521
  .retro-border { border: 1px solid var(--retro-border); } .retro-rounded { border-radius: var(--retro-radius-md); } .retro-rounded-lg { border-radius: var(--retro-radius-lg); } .retro-rounded-xl { border-radius: var(--retro-radius-xl); } .retro-pill { border-radius: var(--retro-radius-pill); }
522
522
  .retro-sr-only, .retro-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@@ -629,7 +629,7 @@
629
629
  .retro-button.retro-button-outline-heavy,
630
630
  .retro-button-outline-heavy {
631
631
  background: transparent;
632
- color: var(--retro-primary);
632
+ color: var(--usk-primary-ink, var(--retro-primary));
633
633
  border-style: solid;
634
634
  border-width: 2px;
635
635
  border-color: var(--retro-primary);
@@ -699,7 +699,7 @@
699
699
 
700
700
  .retro-eyebrow {
701
701
  margin: 0;
702
- color: var(--retro-primary);
702
+ color: var(--usk-primary-ink, var(--retro-primary));
703
703
  font-family: var(--retro-font-heading);
704
704
  font-size: .76rem;
705
705
  font-weight: 900;
@@ -1326,7 +1326,7 @@
1326
1326
 
1327
1327
  .retro-button.retro-button-outline-heavy, .retro-button-outline-heavy {
1328
1328
  background: var(--retro-enamel-bg);
1329
- color: var(--retro-primary);
1329
+ color: var(--usk-primary-ink, var(--retro-primary));
1330
1330
  border: 4px double var(--retro-metal-edge);
1331
1331
  border-radius: var(--retro-radius-pill);
1332
1332
  clip-path: inset(0 round var(--retro-radius-pill));
@@ -1410,7 +1410,7 @@
1410
1410
  .retro-button-primary { background: var(--retro-action-bg); color: var(--retro-on-primary); border-color: var(--retro-primary); }
1411
1411
  .retro-button-secondary { background: var(--retro-secondary-action-bg); color: var(--retro-on-secondary); border-color: var(--retro-secondary-hover); }
1412
1412
  .retro-button-danger { background: var(--retro-danger-action-bg); color: var(--retro-on-danger); border-color: var(--retro-danger); }
1413
- .retro-button-ghost { background: transparent; color: var(--retro-primary); border-color: transparent; }
1413
+ .retro-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--retro-primary)); border-color: transparent; }
1414
1414
  }
1415
1415
 
1416
1416
  @layer ui-style-kit.retrofuturism {
@@ -449,10 +449,10 @@
449
449
  .tactile-button:active, .tactile-icon-button:active, .tactile-button[aria-pressed="true"], .tactile-icon-button[aria-pressed="true"], .tactile-button.is-active, .tactile-icon-button.is-active { transform: translateY(1px); box-shadow: var(--tactile-inset-shadow); }
450
450
  .tactile-button-primary { background: var(--tactile-action-bg); color: var(--tactile-on-primary); border-color: var(--tactile-primary); box-shadow: var(--tactile-button-shadow); }
451
451
  .tactile-button-primary:hover { background: var(--tactile-action-hover-bg); border-color: var(--tactile-primary-hover); }
452
- .tactile-button-secondary { background: var(--tactile-control-bg); color: var(--tactile-primary); border-color: rgb(var(--tactile-primary-rgb) / .48); }
452
+ .tactile-button-secondary { background: var(--tactile-control-bg); color: var(--usk-primary-ink, var(--tactile-primary)); border-color: rgb(var(--tactile-primary-rgb) / .48); }
453
453
  .tactile-button-secondary:hover { background: var(--tactile-field-bg); border-color: var(--tactile-primary); }
454
454
  .tactile-button-danger { background: linear-gradient(180deg, var(--tactile-danger), rgb(var(--tactile-danger-rgb) / .82)); color: var(--tactile-on-danger); border-color: var(--tactile-danger); }
455
- .tactile-button-ghost { background: transparent; color: var(--tactile-primary); border-color: transparent; box-shadow: none; }
455
+ .tactile-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--tactile-primary)); border-color: transparent; box-shadow: none; }
456
456
  .tactile-icon-button { width: 3rem; padding: 0; border-radius: var(--tactile-radius-sm); }
457
457
  .tactile-button:disabled, .tactile-icon-button:disabled, .tactile-disabled { opacity: .55; cursor: not-allowed; transform: none; }
458
458
 
@@ -544,7 +544,7 @@
544
544
  Utilities
545
545
  ========================================================= */
546
546
 
547
- .tactile-text-primary { color: var(--tactile-primary); } .tactile-text-secondary { color: var(--tactile-secondary); } .tactile-text-accent { color: var(--tactile-accent); } .tactile-text-success { color: var(--tactile-success); } .tactile-text-warning { color: var(--tactile-warning); } .tactile-text-danger { color: var(--tactile-danger); }
547
+ .tactile-text-primary { color: var(--usk-primary-ink, var(--tactile-primary)); } .tactile-text-secondary { color: var(--tactile-secondary); } .tactile-text-accent { color: var(--usk-accent-ink, var(--tactile-accent)); } .tactile-text-success { color: var(--tactile-success); } .tactile-text-warning { color: var(--tactile-warning); } .tactile-text-danger { color: var(--tactile-danger); }
548
548
  .tactile-bg-primary { background: var(--tactile-primary); color: var(--tactile-on-primary); } .tactile-bg-secondary { background: var(--tactile-secondary); color: var(--tactile-on-secondary); }
549
549
  .tactile-border { border: 1px solid var(--tactile-border); } .tactile-rounded { border-radius: var(--tactile-radius-md); } .tactile-rounded-lg { border-radius: var(--tactile-radius-lg); } .tactile-rounded-xl { border-radius: var(--tactile-radius-xl); } .tactile-pill { border-radius: var(--tactile-radius-pill); }
550
550
  .tactile-sr-only, .tactile-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@@ -655,7 +655,7 @@
655
655
  .tactile-button.tactile-button-outline-heavy,
656
656
  .tactile-button-outline-heavy {
657
657
  background: transparent;
658
- color: var(--tactile-primary);
658
+ color: var(--usk-primary-ink, var(--tactile-primary));
659
659
  border-style: solid;
660
660
  border-width: 2px;
661
661
  border-color: var(--tactile-primary);
@@ -725,7 +725,7 @@
725
725
 
726
726
  .tactile-eyebrow {
727
727
  margin: 0;
728
- color: var(--tactile-primary);
728
+ color: var(--usk-primary-ink, var(--tactile-primary));
729
729
  font-family: var(--tactile-font-heading);
730
730
  font-size: .76rem;
731
731
  font-weight: 900;
@@ -1161,7 +1161,7 @@
1161
1161
  .tactile-button-primary { background: var(--tactile-primary); color: var(--tactile-on-primary); border-color: var(--tactile-primary); }
1162
1162
  .tactile-button-secondary { background: var(--tactile-secondary); color: var(--tactile-on-secondary); border-color: var(--tactile-secondary); }
1163
1163
  .tactile-button-danger { background: var(--tactile-danger); color: var(--tactile-on-danger); border-color: var(--tactile-danger); }
1164
- .tactile-button-ghost { background: transparent; color: var(--tactile-primary); border-color: transparent; }
1164
+ .tactile-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--tactile-primary)); border-color: transparent; }
1165
1165
  }
1166
1166
 
1167
1167
  @layer ui-style-kit.tactile {
@@ -1549,7 +1549,7 @@
1549
1549
 
1550
1550
  .tactile-button-ghost {
1551
1551
  background: transparent;
1552
- color: var(--tactile-primary);
1552
+ color: var(--usk-primary-ink, var(--tactile-primary));
1553
1553
  border-color: transparent;
1554
1554
  box-shadow: none;
1555
1555
  }