ui-style-kit-css 2.4.0 → 2.4.1

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 (62) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +22 -13
  3. package/STYLE-MAP.md +5 -0
  4. package/dist/ui-style-kit.css +607 -196
  5. package/dist/ui-style-kit.min.css +2 -2
  6. package/dist/ui-style-kit.visual.css +607 -196
  7. package/dist/ui-style-kit.visual.min.css +2 -2
  8. package/dist/ui-style-kit.with-bridge.css +607 -196
  9. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  10. package/dist/visual/art-deco.css +421 -11
  11. package/dist/visual/bauhaus.css +2 -2
  12. package/dist/visual/bento.css +2 -2
  13. package/dist/visual/brutalism.css +420 -10
  14. package/dist/visual/clay.css +2 -2
  15. package/dist/visual/cyberpunk.css +428 -18
  16. package/dist/visual/data-terminal.css +427 -17
  17. package/dist/visual/editorial-luxe.css +421 -11
  18. package/dist/visual/industrial-utility.css +420 -10
  19. package/dist/visual/maximalist.css +417 -7
  20. package/dist/visual/minimal-saas.css +427 -16
  21. package/dist/visual/neo-noir.css +2 -2
  22. package/dist/visual/neumorphism.css +421 -11
  23. package/dist/visual/organic-modern.css +2 -2
  24. package/dist/visual/paper-editorial.css +421 -11
  25. package/dist/visual/retro-glass.css +421 -11
  26. package/dist/visual/retrofuturism.css +421 -11
  27. package/dist/visual/tactile.css +420 -10
  28. package/dist/visual/technical-blueprint.css +433 -23
  29. package/dist/visual/y2k.css +420 -10
  30. package/docs/BAUHAUS.md +1 -1
  31. package/docs/CLAY.md +1 -1
  32. package/docs/COLOR-THEMES.md +63 -0
  33. package/docs/ECOSYSTEM.md +2 -2
  34. package/docs/ORGANIC-MODERN.md +1 -1
  35. package/docs/PUBLISHING.md +10 -10
  36. package/docs/RELEASE-2.4.1.md +35 -0
  37. package/docs/STYLE-GUIDE.md +1 -1
  38. package/manifest.json +7 -2
  39. package/package.json +3 -2
  40. package/styles/art-deco.css +6 -6
  41. package/styles/bauhaus.css +12 -12
  42. package/styles/bento.css +28 -27
  43. package/styles/brutalism.css +5 -5
  44. package/styles/clay.css +5 -5
  45. package/styles/components.css +2 -2
  46. package/styles/cyberpunk.css +14 -14
  47. package/styles/data-terminal.css +12 -12
  48. package/styles/editorial-luxe.css +6 -6
  49. package/styles/industrial-utility.css +5 -5
  50. package/styles/maximalist.css +2 -2
  51. package/styles/minimal-saas.css +13 -12
  52. package/styles/native-elements.css +1 -1
  53. package/styles/neo-noir.css +8 -8
  54. package/styles/neumorphism.css +6 -6
  55. package/styles/organic-modern.css +8 -8
  56. package/styles/paper-editorial.css +6 -6
  57. package/styles/retro-glass.css +6 -6
  58. package/styles/retrofuturism.css +6 -6
  59. package/styles/tactile.css +7 -7
  60. package/styles/technical-blueprint.css +18 -18
  61. package/styles/theme-colors.css +410 -0
  62. package/styles/y2k.css +5 -5
@@ -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 {
@@ -1124,7 +1124,7 @@
1124
1124
  .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
1125
  .organic-brand { display: flex; gap: 12px; align-items: center; }
1126
1126
  .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; }
1127
+ .organic-brand .organic-icon { color: var(--usk-accent-ink, var(--organic-accent)); width: 30px; height: 30px; }
1128
1128
  .organic-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
1129
1129
  .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
1130
  .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 +1170,7 @@
1170
1170
  .organic-performance meter { width: 100%; }
1171
1171
  .organic-notices { display: flex; gap: 12px; flex-wrap: wrap; }
1172
1172
  .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); }
1173
+ .organic-notice > .organic-icon { color: var(--usk-accent-ink, var(--organic-accent)); }
1174
1174
  .organic-notice small { display: block; margin-top: 4px; }
1175
1175
  .organic-add-material { padding: 16px; background: var(--organic-surface); border: 1px solid var(--organic-border); border-radius: 12px; }
1176
1176
  .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 {
@@ -1071,7 +1071,7 @@
1071
1071
  .rg-alert-success { border-color: var(--rg-success); }
1072
1072
  .rg-alert-warning { border-color: var(--rg-warning); }
1073
1073
  .rg-alert-danger { border-color: var(--rg-danger); }
1074
- .rg-alert > [aria-hidden="true"] { color: var(--rg-primary); }
1074
+ .rg-alert > [aria-hidden="true"] { color: var(--usk-primary-ink, var(--rg-primary)); }
1075
1075
  .rg-alert-success > [aria-hidden="true"] { color: var(--rg-success); }
1076
1076
  .rg-alert-warning > [aria-hidden="true"] { color: var(--rg-warning); }
1077
1077
  .rg-alert-danger > [aria-hidden="true"] { color: var(--rg-danger); }
@@ -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
  }
@@ -489,7 +489,7 @@
489
489
  .blueprint-title, .blueprint-heading, .blueprint-kicker, .blueprint-button, .blueprint-badge, .blueprint-nav-link { font-family: var(--blueprint-font-heading); }
490
490
  .blueprint-title { margin: 0; color: var(--blueprint-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
491
491
  .blueprint-heading { margin: 0; color: var(--blueprint-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
492
- .blueprint-kicker { margin: 0; color: var(--blueprint-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
492
+ .blueprint-kicker { margin: 0; color: var(--usk-primary-ink, var(--blueprint-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
493
493
  .blueprint-subtitle, .blueprint-copy { margin: 0; color: var(--blueprint-text-muted); line-height: 1.65; }
494
494
  .blueprint-text-muted { color: var(--blueprint-text-muted); }
495
495
  .blueprint-divider { width: 100%; height: 1px; border: 0; background: var(--blueprint-border); }
@@ -623,7 +623,7 @@
623
623
  Utilities
624
624
  ========================================================= */
625
625
 
626
- .blueprint-text-primary { color: var(--blueprint-primary); } .blueprint-text-secondary { color: var(--blueprint-secondary); } .blueprint-text-accent { color: var(--blueprint-accent); } .blueprint-text-success { color: var(--blueprint-success); } .blueprint-text-warning { color: var(--blueprint-warning); } .blueprint-text-danger { color: var(--blueprint-danger); }
626
+ .blueprint-text-primary { color: var(--usk-primary-ink, var(--blueprint-primary)); } .blueprint-text-secondary { color: var(--blueprint-secondary); } .blueprint-text-accent { color: var(--usk-accent-ink, var(--blueprint-accent)); } .blueprint-text-success { color: var(--blueprint-success); } .blueprint-text-warning { color: var(--blueprint-warning); } .blueprint-text-danger { color: var(--blueprint-danger); }
627
627
  .blueprint-bg-primary { background: var(--blueprint-primary); color: var(--blueprint-on-primary); } .blueprint-bg-secondary { background: var(--blueprint-secondary); color: var(--blueprint-on-secondary); }
628
628
  .blueprint-border { border: 1px solid var(--blueprint-border); } .blueprint-rounded { border-radius: var(--blueprint-radius-md); } .blueprint-rounded-lg { border-radius: var(--blueprint-radius-lg); } .blueprint-rounded-xl { border-radius: var(--blueprint-radius-xl); } .blueprint-pill { border-radius: var(--blueprint-radius-pill); }
629
629
  .blueprint-sr-only, .blueprint-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; }
@@ -731,7 +731,7 @@
731
731
  .blueprint-button.blueprint-button-outline-heavy,
732
732
  .blueprint-button-outline-heavy {
733
733
  background: transparent;
734
- color: var(--blueprint-primary);
734
+ color: var(--usk-primary-ink, var(--blueprint-primary));
735
735
  border-style: solid;
736
736
  border-width: 2px;
737
737
  border-color: var(--blueprint-primary);
@@ -801,7 +801,7 @@
801
801
 
802
802
  .blueprint-eyebrow {
803
803
  margin: 0;
804
- color: var(--blueprint-primary);
804
+ color: var(--usk-primary-ink, var(--blueprint-primary));
805
805
  font-family: var(--blueprint-font-heading);
806
806
  font-size: .76rem;
807
807
  font-weight: 900;
@@ -881,7 +881,7 @@
881
881
  .blueprint-input, .blueprint-textarea, .blueprint-select, .blueprint-badge, .blueprint-alert, .blueprint-metric, .blueprint-well, .blueprint-inset { border-radius: 0; }
882
882
  .blueprint-table { font-family: var(--blueprint-font-control); font-size: .82rem; }
883
883
  .blueprint-card-media, .blueprint-media-scrim, .blueprint-feature-strip, .blueprint-callout-bar { border-radius: 0; }
884
- .blueprint-icon-medallion { border-radius: 0; background: transparent; color: var(--blueprint-primary); box-shadow: inset 0 0 0 1px rgb(var(--blueprint-primary-rgb) / .35); }
884
+ .blueprint-icon-medallion { border-radius: 0; background: transparent; color: var(--usk-primary-ink, var(--blueprint-primary)); box-shadow: inset 0 0 0 1px rgb(var(--blueprint-primary-rgb) / .35); }
885
885
  .blueprint-badge-seal { border-radius: 0; background: transparent; font-family: var(--blueprint-font-control); }
886
886
  .blueprint-card-accent-edge { border-inline-start-width: 1px; box-shadow: inset .35rem 0 0 rgb(var(--blueprint-primary-rgb) / .12); }
887
887
 
@@ -1037,7 +1037,7 @@
1037
1037
  .blueprint-button-primary { background: var(--blueprint-primary); color: var(--blueprint-on-primary); border-color: var(--blueprint-primary); }
1038
1038
  .blueprint-button-secondary { background: transparent; color: var(--blueprint-secondary); border-color: var(--blueprint-secondary); }
1039
1039
  .blueprint-button-danger { background: transparent; color: var(--blueprint-danger); border-color: var(--blueprint-danger); }
1040
- .blueprint-button-ghost { background: transparent; color: var(--blueprint-primary); border-color: transparent; }
1040
+ .blueprint-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--blueprint-primary)); border-color: transparent; }
1041
1041
  }
1042
1042
 
1043
1043
  @layer ui-style-kit.technical_blueprint {
@@ -1049,7 +1049,7 @@
1049
1049
  @layer ui-style-kit.technical_blueprint {
1050
1050
  /** Reusable sheet frame, reference datum, and calibrated line samples. */
1051
1051
  .blueprint-sheet { position: relative; border: 3px double var(--blueprint-line-strong); padding: 16px; }
1052
- .blueprint-datum { position: relative; display: inline-grid; place-items: center; flex: 0 0 52px; inline-size: 52px; block-size: 52px; color: var(--blueprint-primary); border: 1.5px solid currentColor; border-radius: 50%; font: 700 16px/1 var(--blueprint-font-mono); }
1052
+ .blueprint-datum { position: relative; display: inline-grid; place-items: center; flex: 0 0 52px; inline-size: 52px; block-size: 52px; color: var(--usk-primary-ink, var(--blueprint-primary)); border: 1.5px solid currentColor; border-radius: 50%; font: 700 16px/1 var(--blueprint-font-mono); }
1053
1053
  .blueprint-datum::before { content: ""; position: absolute; inset: 50% -5px auto; border-top: 1px solid currentColor; }
1054
1054
  .blueprint-datum::after { content: ""; position: absolute; inset: -5px auto -5px 50%; border-left: 1px solid currentColor; }
1055
1055
  .blueprint-line-swatch { display: inline-block; inline-size: 58px; border-top: var(--blueprint-line-weight, 1px) solid var(--blueprint-primary); }
@@ -1130,7 +1130,7 @@
1130
1130
  --usk-native-range-thumb-radius: 50%;
1131
1131
  --usk-native-range-thumb-shadow: none;
1132
1132
  }
1133
- [data-ui="technical-blueprint"] :where(a) { color: var(--blueprint-primary); }
1133
+ [data-ui="technical-blueprint"] :where(a) { color: var(--usk-primary-ink, var(--blueprint-primary)); }
1134
1134
  [data-ui="technical-blueprint"] :where(h1, h2, h3, h4, h5, h6) { letter-spacing: 0; }
1135
1135
  .blueprint-title { font-size: 32px; line-height: 1.15; letter-spacing: 0; }
1136
1136
  .blueprint-overline, .blueprint-label { display: block; margin: 0 0 6px; color: var(--blueprint-text-soft); font: 700 12px/1.3 var(--blueprint-font-mono); letter-spacing: 0; text-transform: uppercase; }
@@ -1167,7 +1167,7 @@
1167
1167
  .blueprint-input::placeholder, .blueprint-textarea::placeholder { color: var(--blueprint-text-soft); opacity: 1; }
1168
1168
  .blueprint-input-wrap { display: flex; align-items: center; position: relative; }
1169
1169
  .blueprint-input-wrap .blueprint-input { padding-inline-end: 36px; }
1170
- .blueprint-input-icon { position: absolute; inset-inline-end: 11px; color: var(--blueprint-primary); pointer-events: none; }
1170
+ .blueprint-input-icon { position: absolute; inset-inline-end: 11px; color: var(--usk-primary-ink, var(--blueprint-primary)); pointer-events: none; }
1171
1171
  .blueprint-helper, .blueprint-error-text { display: block; margin-block-start: 4px; color: var(--blueprint-text-soft); font: 12px/1.4 var(--blueprint-font-mono); }
1172
1172
  .blueprint-error-text { border-inline-start: 2px solid var(--blueprint-danger); padding-inline-start: 6px; }
1173
1173
  .blueprint-input.is-error, .blueprint-input[aria-invalid="true"], .blueprint-select[aria-invalid="true"], .blueprint-textarea[aria-invalid="true"] { border-color: var(--blueprint-danger); box-shadow: 0 0 0 1px var(--blueprint-danger); }
@@ -1180,13 +1180,13 @@
1180
1180
  .blueprint-option:disabled { opacity: .5; cursor: not-allowed; }
1181
1181
  .blueprint-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-block-size: 48px; padding: 8px; background: var(--blueprint-surface-input); border: 1px solid var(--blueprint-line-color); }
1182
1182
  .blueprint-chip, .blueprint-badge { display: inline-flex; align-items: center; gap: 6px; min-block-size: 24px; padding: 4px 10px; border: 1px solid var(--blueprint-line-strong); border-radius: 0; background: transparent; color: var(--blueprint-text); box-shadow: none; font: 700 12px/1.2 var(--blueprint-font-body); letter-spacing: 0; text-transform: uppercase; }
1183
- .blueprint-chip, .blueprint-badge-primary { color: var(--blueprint-primary); border-color: var(--blueprint-primary); }
1183
+ .blueprint-chip, .blueprint-badge-primary { color: var(--usk-primary-ink, var(--blueprint-primary)); border-color: var(--blueprint-primary); }
1184
1184
  .blueprint-chip-danger, .blueprint-badge-danger { background: rgb(var(--blueprint-danger-rgb) / .04); color: var(--blueprint-danger); border-color: var(--blueprint-danger); }
1185
1185
  .blueprint-chip-warning, .blueprint-badge-warning { background: rgb(var(--blueprint-warning-rgb) / .08); color: var(--blueprint-warning); border-color: var(--blueprint-warning); }
1186
1186
  .blueprint-badge-success { background: rgb(var(--blueprint-success-rgb) / .08); color: var(--blueprint-success); border-color: var(--blueprint-success); }
1187
1187
  .blueprint-chip { cursor: pointer; }
1188
1188
  .blueprint-file { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; position: relative; min-block-size: 112px; padding: 16px; border: 1px dashed var(--blueprint-line-strong); background: var(--blueprint-grid-image), var(--blueprint-surface-input); background-size: 16px 16px; color: var(--blueprint-text-soft); text-align: center; font: 14px/1.4 var(--blueprint-font-body); cursor: pointer; }
1189
- .blueprint-file strong { color: var(--blueprint-primary); }
1189
+ .blueprint-file strong { color: var(--usk-primary-ink, var(--blueprint-primary)); }
1190
1190
  .blueprint-file input[type="file"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
1191
1191
  .blueprint-file:focus-within { outline: 2px solid var(--blueprint-focus); outline-offset: 2px; }
1192
1192
  .blueprint-choice, .blueprint-switch { display: inline-flex; align-items: center; gap: 8px; position: relative; min-block-size: 32px; color: var(--blueprint-text-soft); font: 14px/1.3 var(--blueprint-font-body); cursor: pointer; }
@@ -1216,7 +1216,7 @@
1216
1216
  .blueprint-range::-webkit-slider-thumb { appearance: none; inline-size: 18px; block-size: 18px; margin-top: -7px; border: 2px solid var(--blueprint-primary); border-radius: 50%; background: radial-gradient(var(--blueprint-primary) 0 2px, var(--blueprint-bg) 2px); box-shadow: none; }
1217
1217
  .blueprint-range::-moz-range-thumb { inline-size: 18px; block-size: 18px; border: 2px solid var(--blueprint-primary); border-radius: 50%; background: radial-gradient(var(--blueprint-primary) 0 2px, var(--blueprint-bg) 2px); box-shadow: none; }
1218
1218
  .blueprint-progress { position: relative; block-size: 12px; height: 12px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--blueprint-line-color); border-radius: 0; overflow: visible; }
1219
- .blueprint-progress-bar { display: block; position: absolute; inset-block-end: 0; block-size: 3px; inline-size: var(--blueprint-progress-value, 64%); background: var(--blueprint-primary); color: var(--blueprint-primary); border-radius: 0; box-shadow: none; }
1219
+ .blueprint-progress-bar { display: block; position: absolute; inset-block-end: 0; block-size: 3px; inline-size: var(--blueprint-progress-value, 64%); background: var(--blueprint-primary); color: var(--usk-primary-ink, var(--blueprint-primary)); border-radius: 0; box-shadow: none; }
1220
1220
  .blueprint-progress-bar::after { content: ""; position: absolute; inset: auto -4px 3px auto; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid currentColor; }
1221
1221
  .blueprint-progress-danger .blueprint-progress-bar { background: var(--blueprint-danger); color: var(--blueprint-danger); }
1222
1222
  .blueprint-meter { position: relative; block-size: 3px; margin-block: 16px; background: linear-gradient(90deg, var(--blueprint-success) 0 46%, var(--blueprint-warning) 46% 72%, var(--blueprint-danger) 72% 100%); }
@@ -1227,12 +1227,12 @@
1227
1227
  .blueprint-step { position: relative; flex: 1; margin-block: 0; color: var(--blueprint-text-soft); text-align: center; font: 12px/1.4 var(--blueprint-font-mono); }
1228
1228
  .blueprint-step b { display: flex; align-items: center; justify-content: center; inline-size: 24px; block-size: 24px; margin: 0 auto 8px; background: var(--blueprint-bg); border: 1px solid var(--blueprint-line-strong); }
1229
1229
  .blueprint-step.is-complete b { background: var(--blueprint-fill); color: var(--blueprint-fill-ink); border-color: var(--blueprint-primary); }
1230
- .blueprint-step.is-active b { color: var(--blueprint-primary); border: 2px solid var(--blueprint-primary); }
1230
+ .blueprint-step.is-active b { color: var(--usk-primary-ink, var(--blueprint-primary)); border: 2px solid var(--blueprint-primary); }
1231
1231
  .blueprint-alert { display: flex; align-items: center; gap: 8px; min-block-size: 40px; padding: 8px; border: 1px solid var(--blueprint-primary); border-radius: 0; background: transparent; color: var(--blueprint-text-soft); box-shadow: none; font: 14px/1.4 var(--blueprint-font-body); }
1232
1232
  .blueprint-alert-success { border-color: var(--blueprint-success); }
1233
1233
  .blueprint-alert-warning { border-color: var(--blueprint-warning); }
1234
1234
  .blueprint-alert-danger { border-color: var(--blueprint-danger); }
1235
- .blueprint-alert > :first-child { color: var(--blueprint-primary); }
1235
+ .blueprint-alert > :first-child { color: var(--usk-primary-ink, var(--blueprint-primary)); }
1236
1236
  .blueprint-alert-success > :first-child, .blueprint-toast > :first-child { color: var(--blueprint-success); }
1237
1237
  .blueprint-alert-warning > :first-child { color: var(--blueprint-warning); }
1238
1238
  .blueprint-alert-danger > :first-child { color: var(--blueprint-danger); }
@@ -1243,7 +1243,7 @@
1243
1243
  .blueprint-breadcrumb, .blueprint-tabs, .blueprint-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
1244
1244
  .blueprint-breadcrumb { color: var(--blueprint-text-soft); font: 12px/1.4 var(--blueprint-font-mono); }
1245
1245
  .blueprint-breadcrumb a { color: var(--blueprint-text-soft); }
1246
- .blueprint-breadcrumb [aria-current] { color: var(--blueprint-primary); font-weight: 700; }
1246
+ .blueprint-breadcrumb [aria-current] { color: var(--usk-primary-ink, var(--blueprint-primary)); font-weight: 700; }
1247
1247
  .blueprint-tab { font: 700 12px/1.4 var(--blueprint-font-mono); }
1248
1248
  .blueprint-pagination-page { min-inline-size: 36px; padding: 8px; font-size: 12px; }
1249
1249
  .blueprint-nav { padding: 0; background: transparent; border: 0; box-shadow: none; gap: 6px; }
@@ -1259,7 +1259,7 @@
1259
1259
  .blueprint-table th { font-family: var(--blueprint-font-mono); }
1260
1260
  .blueprint-list { margin: 0; padding-inline-start: 20px; color: var(--blueprint-text-soft); font: 14px/1.5 var(--blueprint-font-body); }
1261
1261
  .blueprint-list li + li { margin-top: 8px; }
1262
- .blueprint-list li::marker { color: var(--blueprint-primary); }
1262
+ .blueprint-list li::marker { color: var(--usk-primary-ink, var(--blueprint-primary)); }
1263
1263
  .blueprint-tooltip, [data-ui="technical-blueprint"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) { position: relative; padding: 12px; max-inline-size: 100%; background: var(--blueprint-surface-strong); color: var(--blueprint-text); border: 1px solid var(--blueprint-primary); border-radius: 0; box-shadow: none; font: 700 12px/1.4 var(--blueprint-font-mono); letter-spacing: 0; }
1264
1264
  .blueprint-tooltip::after { content: ""; position: absolute; inset: 100% auto auto 50%; block-size: 16px; border-left: 1px solid var(--blueprint-primary); transform: rotate(45deg); transform-origin: top; }
1265
1265
  .blueprint-modal { max-inline-size: min(440px, calc(100vw - 32px)); }
@@ -1270,7 +1270,7 @@
1270
1270
  .blueprint-accordion { margin: 0; padding: 0; background: var(--blueprint-surface-input); border: 1px solid var(--blueprint-line-color); color: var(--blueprint-text); }
1271
1271
  .blueprint-accordion summary { min-block-size: 36px; padding: 10px 12px; font: 700 12px/1.4 var(--blueprint-font-mono); cursor: pointer; list-style: none; }
1272
1272
  .blueprint-accordion summary::-webkit-details-marker { display: none; }
1273
- .blueprint-accordion summary::after { content: "+"; float: right; color: var(--blueprint-primary); }
1273
+ .blueprint-accordion summary::after { content: "+"; float: right; color: var(--usk-primary-ink, var(--blueprint-primary)); }
1274
1274
  .blueprint-accordion[open] summary::after { content: "-"; }
1275
1275
  .blueprint-accordion p { margin: 0; padding: 4px 12px 12px; color: var(--blueprint-text-soft); font: 14px/1.4 var(--blueprint-font-body); }
1276
1276
  .blueprint-code { display: block; margin: 0; padding: 12px; border-inline-start: 2px solid var(--blueprint-primary); background: var(--blueprint-surface-input); color: var(--blueprint-text-soft); white-space: pre-wrap; overflow-wrap: break-word; font: 12px/1.5 var(--blueprint-font-mono); }
@@ -1281,7 +1281,7 @@
1281
1281
  .blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]),
1282
1282
  .blueprint-button[aria-busy="true"]::after, .blueprint-icon-button[aria-busy="true"]::after,
1283
1283
  [data-ui="technical-blueprint"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after { box-sizing: border-box; border: 2px solid var(--blueprint-line-color); border-top-color: currentColor; border-radius: 50%; background: none; box-shadow: none; clip-path: none; padding: 0; flex-shrink: 0; animation: blueprint-spin .85s linear infinite; }
1284
- .blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) { color: var(--blueprint-primary); }
1284
+ .blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) { color: var(--usk-primary-ink, var(--blueprint-primary)); }
1285
1285
  .blueprint-button[aria-busy="true"]::after, .blueprint-icon-button[aria-busy="true"]::after,
1286
1286
  [data-ui="technical-blueprint"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after { content: ""; display: inline-block; inline-size: 16px; block-size: 16px; flex: 0 0 16px; }
1287
1287
  .blueprint-spinner::before, .blueprint-spinner::after { content: none; }