ui-style-kit-css 2.1.0 → 2.3.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 (64) hide show
  1. package/CHANGELOG.md +54 -0
  2. package/README.md +169 -54
  3. package/STYLE-MAP.md +55 -0
  4. package/dist/ui-style-kit.css +23744 -7015
  5. package/dist/ui-style-kit.min.css +2 -2
  6. package/dist/ui-style-kit.visual.css +22948 -6669
  7. package/dist/ui-style-kit.visual.min.css +2 -2
  8. package/dist/ui-style-kit.with-bridge.css +23941 -7205
  9. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  10. package/dist/visual/art-deco.css +4776 -0
  11. package/dist/visual/bauhaus.css +1894 -147
  12. package/dist/visual/bento.css +1910 -166
  13. package/dist/visual/brutalism.css +1853 -98
  14. package/dist/visual/clay.css +4789 -0
  15. package/dist/visual/cyberpunk.css +1840 -94
  16. package/dist/visual/data-terminal.css +4804 -0
  17. package/dist/visual/editorial-luxe.css +4804 -0
  18. package/dist/visual/industrial-utility.css +4797 -0
  19. package/dist/visual/maximalist.css +1862 -112
  20. package/dist/visual/minimal-saas.css +1886 -147
  21. package/dist/visual/neo-noir.css +4790 -0
  22. package/dist/visual/neumorphism.css +1896 -151
  23. package/dist/visual/organic-modern.css +4767 -0
  24. package/dist/visual/paper-editorial.css +4799 -0
  25. package/dist/visual/retro-glass.css +1859 -93
  26. package/dist/visual/retrofuturism.css +1852 -113
  27. package/dist/visual/tactile.css +1851 -111
  28. package/dist/visual/technical-blueprint.css +4791 -0
  29. package/dist/visual/y2k.css +1840 -92
  30. package/docs/BRIDGE-MIGRATION.md +20 -0
  31. package/docs/ECOSYSTEM.md +39 -4
  32. package/docs/PUBLISHING.md +38 -13
  33. package/docs/STYLE-GUIDE.md +53 -13
  34. package/docs/TOKENS.md +50 -1
  35. package/docs/superpowers/plans/2026-08-29-preset-identity-system-refinement.md +649 -0
  36. package/docs/superpowers/specs/2026-08-29-preset-identity-system-refinement-design.md +212 -0
  37. package/manifest.json +482 -2
  38. package/package.json +77 -7
  39. package/styles/art-deco.css +683 -0
  40. package/styles/bauhaus.css +237 -3
  41. package/styles/bento.css +266 -7
  42. package/styles/brutalism.css +235 -3
  43. package/styles/clay.css +692 -0
  44. package/styles/components.css +608 -14
  45. package/styles/content-overflow.css +423 -4
  46. package/styles/cyberpunk.css +234 -3
  47. package/styles/data-terminal.css +691 -0
  48. package/styles/editorial-luxe.css +687 -0
  49. package/styles/industrial-utility.css +690 -0
  50. package/styles/interactive-surface-bridge.css +17 -10
  51. package/styles/interactive-surface-theme.css +17 -8
  52. package/styles/maximalist.css +238 -4
  53. package/styles/minimal-saas.css +234 -3
  54. package/styles/native-elements.css +80 -12
  55. package/styles/neo-noir.css +690 -0
  56. package/styles/neumorphism.css +234 -3
  57. package/styles/organic-modern.css +683 -0
  58. package/styles/paper-editorial.css +688 -0
  59. package/styles/retro-glass.css +242 -3
  60. package/styles/retrofuturism.css +233 -3
  61. package/styles/tactile.css +235 -3
  62. package/styles/technical-blueprint.css +686 -0
  63. package/styles/theme-colors.css +796 -5
  64. package/styles/y2k.css +237 -3
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * UI Style Kit CSS v2.1.0
2
+ * UI Style Kit CSS v2.3.0
3
3
  * CSS theme and UI style preset library.
4
4
  * License: MIT
5
5
  */
@@ -14,6 +14,16 @@
14
14
 
15
15
  @layer ui-style-kit.theme_colors {
16
16
  /* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
17
+ :where([data-ui][data-theme][data-mode="light"]) {
18
+ --usk-border-text-mix: 45%;
19
+ --usk-border-min-alpha: 1;
20
+ }
21
+
22
+ :where([data-ui][data-theme][data-mode="dark"], [data-ui][data-theme][data-mode="contrast"]) {
23
+ --usk-border-text-mix: 0%;
24
+ --usk-border-min-alpha: 0;
25
+ }
26
+
17
27
  :where([data-ui][data-theme="midnight-gold"][data-mode="light"]) {
18
28
  --usk-bg-rgb: 246 243 234;
19
29
  --usk-surface-rgb: 255 250 240;
@@ -23,7 +33,7 @@
23
33
  --usk-text-muted-rgb: 95 104 121;
24
34
  --usk-border-rgb: 214 200 165;
25
35
  --usk-primary-rgb: 184 135 47;
26
- --usk-primary-hover-rgb: 148 104 31;
36
+ --usk-primary-hover-rgb: 162 118 38;
27
37
  --usk-primary-text-rgb: 16 16 16;
28
38
  --usk-secondary-rgb: 34 49 79;
29
39
  --usk-secondary-hover-rgb: 23 36 60;
@@ -32,7 +42,7 @@
32
42
  --usk-success-rgb: 47 125 84;
33
43
  --usk-warning-rgb: 167 106 0;
34
44
  --usk-danger-rgb: 185 63 63;
35
- --usk-link-rgb: 138 100 31;
45
+ --usk-link-rgb: 132 94 27;
36
46
  --usk-accent-text-rgb: 0 0 0;
37
47
  --usk-success-text-rgb: 255 255 255;
38
48
  --usk-warning-text-rgb: 0 0 0;
@@ -488,7 +498,7 @@
488
498
  --usk-surface-strong-rgb: 255 250 241;
489
499
  --usk-surface-soft-rgb: 234 223 205;
490
500
  --usk-text-rgb: 43 36 25;
491
- --usk-text-muted-rgb: 113 103 84;
501
+ --usk-text-muted-rgb: 107 97 78;
492
502
  --usk-border-rgb: 215 198 167;
493
503
  --usk-primary-rgb: 140 106 61;
494
504
  --usk-primary-hover-rgb: 112 83 47;
@@ -647,7 +657,7 @@
647
657
  --usk-text-muted-rgb: 89 105 82;
648
658
  --usk-border-rgb: 198 216 179;
649
659
  --usk-primary-rgb: 95 159 31;
650
- --usk-primary-hover-rgb: 73 125 23;
660
+ --usk-primary-hover-rgb: 86 145 26;
651
661
  --usk-primary-text-rgb: 16 16 16;
652
662
  --usk-secondary-rgb: 20 127 134;
653
663
  --usk-secondary-hover-rgb: 14 98 104;
@@ -656,7 +666,7 @@
656
666
  --usk-success-rgb: 47 125 84;
657
667
  --usk-warning-rgb: 156 104 0;
658
668
  --usk-danger-rgb: 179 65 65;
659
- --usk-link-rgb: 73 125 23;
669
+ --usk-link-rgb: 65 112 19;
660
670
  --usk-accent-text-rgb: 0 0 0;
661
671
  --usk-success-text-rgb: 255 255 255;
662
672
  --usk-warning-text-rgb: 255 255 255;
@@ -793,6 +803,787 @@
793
803
  --usk-danger-text-rgb: 0 0 0;
794
804
  --usk-focus-rgb: 255 255 255;
795
805
  }
806
+
807
+
808
+ :where([data-ui][data-theme="chrome-navy"][data-mode="light"]) {
809
+ --usk-bg-rgb: 245 247 250;
810
+ --usk-surface-rgb: 255 255 255;
811
+ --usk-surface-strong-rgb: 253 254 255;
812
+ --usk-surface-soft-rgb: 230 234 240;
813
+ --usk-text-rgb: 13 27 42;
814
+ --usk-text-muted-rgb: 78 90 105;
815
+ --usk-border-rgb: 192 198 207;
816
+ --usk-primary-rgb: 31 58 95;
817
+ --usk-primary-hover-rgb: 22 44 72;
818
+ --usk-primary-text-rgb: 255 255 255;
819
+ --usk-secondary-rgb: 62 107 142;
820
+ --usk-secondary-hover-rgb: 50 87 118;
821
+ --usk-secondary-text-rgb: 255 255 255;
822
+ --usk-accent-rgb: 90 127 166;
823
+ --usk-success-rgb: 31 107 83;
824
+ --usk-warning-rgb: 164 106 0;
825
+ --usk-danger-rgb: 178 60 60;
826
+ --usk-link-rgb: 26 53 86;
827
+ --usk-accent-text-rgb: 0 0 0;
828
+ --usk-success-text-rgb: 255 255 255;
829
+ --usk-warning-text-rgb: 0 0 0;
830
+ --usk-danger-text-rgb: 255 255 255;
831
+ --usk-focus-rgb: 90 127 166;
832
+ }
833
+
834
+ :where([data-ui][data-theme="chrome-navy"][data-mode="dark"]) {
835
+ --usk-bg-rgb: 8 17 28;
836
+ --usk-surface-rgb: 16 33 49;
837
+ --usk-surface-strong-rgb: 23 48 66;
838
+ --usk-surface-soft-rgb: 12 26 39;
839
+ --usk-text-rgb: 239 244 250;
840
+ --usk-text-muted-rgb: 181 192 205;
841
+ --usk-border-rgb: 69 87 107;
842
+ --usk-primary-rgb: 126 169 211;
843
+ --usk-primary-hover-rgb: 165 194 225;
844
+ --usk-primary-text-rgb: 8 17 28;
845
+ --usk-secondary-rgb: 168 193 220;
846
+ --usk-secondary-hover-rgb: 199 216 234;
847
+ --usk-secondary-text-rgb: 8 17 28;
848
+ --usk-accent-rgb: 199 213 229;
849
+ --usk-success-rgb: 120 216 181;
850
+ --usk-warning-rgb: 255 209 122;
851
+ --usk-danger-rgb: 255 144 144;
852
+ --usk-link-rgb: 199 213 229;
853
+ --usk-accent-text-rgb: 0 0 0;
854
+ --usk-success-text-rgb: 0 0 0;
855
+ --usk-warning-text-rgb: 0 0 0;
856
+ --usk-danger-text-rgb: 0 0 0;
857
+ --usk-focus-rgb: 159 188 224;
858
+ }
859
+
860
+ :where([data-ui][data-theme="chrome-navy"][data-mode="contrast"]) {
861
+ --usk-bg-rgb: 0 0 0;
862
+ --usk-surface-rgb: 5 8 12;
863
+ --usk-surface-strong-rgb: 10 19 32;
864
+ --usk-surface-soft-rgb: 0 0 0;
865
+ --usk-text-rgb: 255 255 255;
866
+ --usk-text-muted-rgb: 242 247 255;
867
+ --usk-border-rgb: 255 255 255;
868
+ --usk-primary-rgb: 156 197 240;
869
+ --usk-primary-hover-rgb: 255 255 255;
870
+ --usk-primary-text-rgb: 0 0 0;
871
+ --usk-secondary-rgb: 0 230 255;
872
+ --usk-secondary-hover-rgb: 255 255 255;
873
+ --usk-secondary-text-rgb: 0 0 0;
874
+ --usk-accent-rgb: 230 240 255;
875
+ --usk-success-rgb: 0 255 144;
876
+ --usk-warning-rgb: 255 212 0;
877
+ --usk-danger-rgb: 255 92 92;
878
+ --usk-link-rgb: 156 197 240;
879
+ --usk-accent-text-rgb: 0 0 0;
880
+ --usk-success-text-rgb: 0 0 0;
881
+ --usk-warning-text-rgb: 0 0 0;
882
+ --usk-danger-text-rgb: 0 0 0;
883
+ --usk-focus-rgb: 255 255 255;
884
+ }
885
+
886
+ :where([data-ui][data-theme="recycled-emerald"][data-mode="light"]) {
887
+ --usk-bg-rgb: 246 251 249;
888
+ --usk-surface-rgb: 255 255 255;
889
+ --usk-surface-strong-rgb: 252 255 254;
890
+ --usk-surface-soft-rgb: 232 242 239;
891
+ --usk-text-rgb: 14 44 41;
892
+ --usk-text-muted-rgb: 88 112 109;
893
+ --usk-border-rgb: 199 216 212;
894
+ --usk-primary-rgb: 14 91 79;
895
+ --usk-primary-hover-rgb: 10 72 63;
896
+ --usk-primary-text-rgb: 255 255 255;
897
+ --usk-secondary-rgb: 15 118 110;
898
+ --usk-secondary-hover-rgb: 12 95 89;
899
+ --usk-secondary-text-rgb: 255 255 255;
900
+ --usk-accent-rgb: 52 211 153;
901
+ --usk-success-rgb: 21 115 71;
902
+ --usk-warning-rgb: 150 99 0;
903
+ --usk-danger-rgb: 185 63 79;
904
+ --usk-link-rgb: 12 81 71;
905
+ --usk-accent-text-rgb: 0 0 0;
906
+ --usk-success-text-rgb: 255 255 255;
907
+ --usk-warning-text-rgb: 255 255 255;
908
+ --usk-danger-text-rgb: 255 255 255;
909
+ --usk-focus-rgb: 52 211 153;
910
+ }
911
+
912
+ :where([data-ui][data-theme="recycled-emerald"][data-mode="dark"]) {
913
+ --usk-bg-rgb: 7 22 20;
914
+ --usk-surface-rgb: 16 38 34;
915
+ --usk-surface-strong-rgb: 22 54 47;
916
+ --usk-surface-soft-rgb: 11 29 26;
917
+ --usk-text-rgb: 236 251 247;
918
+ --usk-text-muted-rgb: 183 208 203;
919
+ --usk-border-rgb: 65 97 92;
920
+ --usk-primary-rgb: 69 209 175;
921
+ --usk-primary-hover-rgb: 114 227 197;
922
+ --usk-primary-text-rgb: 0 0 0;
923
+ --usk-secondary-rgb: 103 221 209;
924
+ --usk-secondary-hover-rgb: 141 236 227;
925
+ --usk-secondary-text-rgb: 0 0 0;
926
+ --usk-accent-rgb: 139 255 214;
927
+ --usk-success-rgb: 141 229 184;
928
+ --usk-warning-rgb: 255 210 122;
929
+ --usk-danger-rgb: 255 154 168;
930
+ --usk-link-rgb: 139 255 214;
931
+ --usk-accent-text-rgb: 0 0 0;
932
+ --usk-success-text-rgb: 0 0 0;
933
+ --usk-warning-text-rgb: 0 0 0;
934
+ --usk-danger-text-rgb: 0 0 0;
935
+ --usk-focus-rgb: 103 221 209;
936
+ }
937
+
938
+ :where([data-ui][data-theme="recycled-emerald"][data-mode="contrast"]) {
939
+ --usk-bg-rgb: 0 0 0;
940
+ --usk-surface-rgb: 3 16 13;
941
+ --usk-surface-strong-rgb: 8 33 28;
942
+ --usk-surface-soft-rgb: 0 0 0;
943
+ --usk-text-rgb: 255 255 255;
944
+ --usk-text-muted-rgb: 239 255 248;
945
+ --usk-border-rgb: 255 255 255;
946
+ --usk-primary-rgb: 56 240 185;
947
+ --usk-primary-hover-rgb: 255 255 255;
948
+ --usk-primary-text-rgb: 0 0 0;
949
+ --usk-secondary-rgb: 0 240 255;
950
+ --usk-secondary-hover-rgb: 255 255 255;
951
+ --usk-secondary-text-rgb: 0 0 0;
952
+ --usk-accent-rgb: 160 255 217;
953
+ --usk-success-rgb: 0 255 144;
954
+ --usk-warning-rgb: 255 212 0;
955
+ --usk-danger-rgb: 255 102 128;
956
+ --usk-link-rgb: 56 240 185;
957
+ --usk-accent-text-rgb: 0 0 0;
958
+ --usk-success-text-rgb: 0 0 0;
959
+ --usk-warning-text-rgb: 0 0 0;
960
+ --usk-danger-text-rgb: 0 0 0;
961
+ --usk-focus-rgb: 255 255 255;
962
+ }
963
+
964
+ :where([data-ui][data-theme="industrial-orange"][data-mode="light"]) {
965
+ --usk-bg-rgb: 245 243 239;
966
+ --usk-surface-rgb: 255 255 255;
967
+ --usk-surface-strong-rgb: 251 250 248;
968
+ --usk-surface-soft-rgb: 228 224 218;
969
+ --usk-text-rgb: 24 21 18;
970
+ --usk-text-muted-rgb: 98 91 84;
971
+ --usk-border-rgb: 184 178 169;
972
+ --usk-primary-rgb: 183 78 22;
973
+ --usk-primary-hover-rgb: 142 63 18;
974
+ --usk-primary-text-rgb: 255 255 255;
975
+ --usk-secondary-rgb: 43 43 43;
976
+ --usk-secondary-hover-rgb: 27 27 27;
977
+ --usk-secondary-text-rgb: 255 255 255;
978
+ --usk-accent-rgb: 225 139 61;
979
+ --usk-success-rgb: 47 125 84;
980
+ --usk-warning-rgb: 164 106 0;
981
+ --usk-danger-rgb: 178 60 60;
982
+ --usk-link-rgb: 142 63 18;
983
+ --usk-accent-text-rgb: 0 0 0;
984
+ --usk-success-text-rgb: 255 255 255;
985
+ --usk-warning-text-rgb: 0 0 0;
986
+ --usk-danger-text-rgb: 255 255 255;
987
+ --usk-focus-rgb: 225 139 61;
988
+ }
989
+
990
+ :where([data-ui][data-theme="industrial-orange"][data-mode="dark"]) {
991
+ --usk-bg-rgb: 13 12 11;
992
+ --usk-surface-rgb: 26 26 26;
993
+ --usk-surface-strong-rgb: 43 43 43;
994
+ --usk-surface-soft-rgb: 18 17 16;
995
+ --usk-text-rgb: 247 242 235;
996
+ --usk-text-muted-rgb: 197 188 177;
997
+ --usk-border-rgb: 89 81 73;
998
+ --usk-primary-rgb: 255 138 61;
999
+ --usk-primary-hover-rgb: 255 174 113;
1000
+ --usk-primary-text-rgb: 0 0 0;
1001
+ --usk-secondary-rgb: 198 191 182;
1002
+ --usk-secondary-hover-rgb: 227 222 215;
1003
+ --usk-secondary-text-rgb: 0 0 0;
1004
+ --usk-accent-rgb: 255 179 107;
1005
+ --usk-success-rgb: 139 223 178;
1006
+ --usk-warning-rgb: 255 210 122;
1007
+ --usk-danger-rgb: 255 152 152;
1008
+ --usk-link-rgb: 255 179 107;
1009
+ --usk-accent-text-rgb: 0 0 0;
1010
+ --usk-success-text-rgb: 0 0 0;
1011
+ --usk-warning-text-rgb: 0 0 0;
1012
+ --usk-danger-text-rgb: 0 0 0;
1013
+ --usk-focus-rgb: 255 154 66;
1014
+ }
1015
+
1016
+ :where([data-ui][data-theme="industrial-orange"][data-mode="contrast"]) {
1017
+ --usk-bg-rgb: 0 0 0;
1018
+ --usk-surface-rgb: 10 9 8;
1019
+ --usk-surface-strong-rgb: 23 19 17;
1020
+ --usk-surface-soft-rgb: 0 0 0;
1021
+ --usk-text-rgb: 255 255 255;
1022
+ --usk-text-muted-rgb: 247 241 234;
1023
+ --usk-border-rgb: 255 255 255;
1024
+ --usk-primary-rgb: 255 154 66;
1025
+ --usk-primary-hover-rgb: 255 255 255;
1026
+ --usk-primary-text-rgb: 0 0 0;
1027
+ --usk-secondary-rgb: 244 241 236;
1028
+ --usk-secondary-hover-rgb: 255 255 255;
1029
+ --usk-secondary-text-rgb: 0 0 0;
1030
+ --usk-accent-rgb: 255 195 111;
1031
+ --usk-success-rgb: 0 255 144;
1032
+ --usk-warning-rgb: 255 212 0;
1033
+ --usk-danger-rgb: 255 92 92;
1034
+ --usk-link-rgb: 255 179 107;
1035
+ --usk-accent-text-rgb: 0 0 0;
1036
+ --usk-success-text-rgb: 0 0 0;
1037
+ --usk-warning-text-rgb: 0 0 0;
1038
+ --usk-danger-text-rgb: 0 0 0;
1039
+ --usk-focus-rgb: 255 255 255;
1040
+ }
1041
+
1042
+ :where([data-ui][data-theme="performance-red"][data-mode="light"]) {
1043
+ --usk-bg-rgb: 246 246 247;
1044
+ --usk-surface-rgb: 255 255 255;
1045
+ --usk-surface-strong-rgb: 252 252 253;
1046
+ --usk-surface-soft-rgb: 230 231 234;
1047
+ --usk-text-rgb: 18 19 23;
1048
+ --usk-text-muted-rgb: 92 97 107;
1049
+ --usk-border-rgb: 199 203 210;
1050
+ --usk-primary-rgb: 200 16 46;
1051
+ --usk-primary-hover-rgb: 163 14 37;
1052
+ --usk-primary-text-rgb: 255 255 255;
1053
+ --usk-secondary-rgb: 31 31 31;
1054
+ --usk-secondary-hover-rgb: 17 17 17;
1055
+ --usk-secondary-text-rgb: 255 255 255;
1056
+ --usk-accent-rgb: 232 76 97;
1057
+ --usk-success-rgb: 47 125 84;
1058
+ --usk-warning-rgb: 164 106 0;
1059
+ --usk-danger-rgb: 168 15 41;
1060
+ --usk-link-rgb: 163 14 37;
1061
+ --usk-accent-text-rgb: 0 0 0;
1062
+ --usk-success-text-rgb: 255 255 255;
1063
+ --usk-warning-text-rgb: 0 0 0;
1064
+ --usk-danger-text-rgb: 255 255 255;
1065
+ --usk-focus-rgb: 232 76 97;
1066
+ }
1067
+
1068
+ :where([data-ui][data-theme="performance-red"][data-mode="dark"]) {
1069
+ --usk-bg-rgb: 9 9 10;
1070
+ --usk-surface-rgb: 20 20 22;
1071
+ --usk-surface-strong-rgb: 31 31 34;
1072
+ --usk-surface-soft-rgb: 15 16 18;
1073
+ --usk-text-rgb: 249 249 250;
1074
+ --usk-text-muted-rgb: 192 197 207;
1075
+ --usk-border-rgb: 76 79 86;
1076
+ --usk-primary-rgb: 255 76 102;
1077
+ --usk-primary-hover-rgb: 255 112 133;
1078
+ --usk-primary-text-rgb: 0 0 0;
1079
+ --usk-secondary-rgb: 209 211 216;
1080
+ --usk-secondary-hover-rgb: 232 233 236;
1081
+ --usk-secondary-text-rgb: 0 0 0;
1082
+ --usk-accent-rgb: 255 131 148;
1083
+ --usk-success-rgb: 143 223 182;
1084
+ --usk-warning-rgb: 255 210 122;
1085
+ --usk-danger-rgb: 255 127 144;
1086
+ --usk-link-rgb: 255 131 148;
1087
+ --usk-accent-text-rgb: 0 0 0;
1088
+ --usk-success-text-rgb: 0 0 0;
1089
+ --usk-warning-text-rgb: 0 0 0;
1090
+ --usk-danger-text-rgb: 0 0 0;
1091
+ --usk-focus-rgb: 255 76 102;
1092
+ }
1093
+
1094
+ :where([data-ui][data-theme="performance-red"][data-mode="contrast"]) {
1095
+ --usk-bg-rgb: 0 0 0;
1096
+ --usk-surface-rgb: 7 7 7;
1097
+ --usk-surface-strong-rgb: 18 18 18;
1098
+ --usk-surface-soft-rgb: 0 0 0;
1099
+ --usk-text-rgb: 255 255 255;
1100
+ --usk-text-muted-rgb: 245 245 245;
1101
+ --usk-border-rgb: 255 255 255;
1102
+ --usk-primary-rgb: 255 54 86;
1103
+ --usk-primary-hover-rgb: 255 255 255;
1104
+ --usk-primary-text-rgb: 0 0 0;
1105
+ --usk-secondary-rgb: 242 242 242;
1106
+ --usk-secondary-hover-rgb: 255 255 255;
1107
+ --usk-secondary-text-rgb: 0 0 0;
1108
+ --usk-accent-rgb: 255 149 163;
1109
+ --usk-success-rgb: 0 255 144;
1110
+ --usk-warning-rgb: 255 212 0;
1111
+ --usk-danger-rgb: 255 106 125;
1112
+ --usk-link-rgb: 255 149 163;
1113
+ --usk-accent-text-rgb: 0 0 0;
1114
+ --usk-success-text-rgb: 0 0 0;
1115
+ --usk-warning-text-rgb: 0 0 0;
1116
+ --usk-danger-text-rgb: 0 0 0;
1117
+ --usk-focus-rgb: 255 255 255;
1118
+ }
1119
+
1120
+ :where([data-ui][data-theme="heritage-brass"][data-mode="light"]) {
1121
+ --usk-bg-rgb: 250 244 234;
1122
+ --usk-surface-rgb: 255 253 249;
1123
+ --usk-surface-strong-rgb: 255 255 255;
1124
+ --usk-surface-soft-rgb: 239 228 207;
1125
+ --usk-text-rgb: 42 31 26;
1126
+ --usk-text-muted-rgb: 109 92 84;
1127
+ --usk-border-rgb: 212 192 166;
1128
+ --usk-primary-rgb: 107 15 26;
1129
+ --usk-primary-hover-rgb: 91 13 22;
1130
+ --usk-primary-text-rgb: 255 255 255;
1131
+ --usk-secondary-rgb: 17 17 17;
1132
+ --usk-secondary-hover-rgb: 0 0 0;
1133
+ --usk-secondary-text-rgb: 255 255 255;
1134
+ --usk-accent-rgb: 201 154 70;
1135
+ --usk-success-rgb: 47 125 84;
1136
+ --usk-warning-rgb: 160 107 19;
1137
+ --usk-danger-rgb: 178 60 60;
1138
+ --usk-link-rgb: 91 13 22;
1139
+ --usk-accent-text-rgb: 0 0 0;
1140
+ --usk-success-text-rgb: 255 255 255;
1141
+ --usk-warning-text-rgb: 0 0 0;
1142
+ --usk-danger-text-rgb: 255 255 255;
1143
+ --usk-focus-rgb: 201 154 70;
1144
+ }
1145
+
1146
+ :where([data-ui][data-theme="heritage-brass"][data-mode="dark"]) {
1147
+ --usk-bg-rgb: 19 13 10;
1148
+ --usk-surface-rgb: 33 24 20;
1149
+ --usk-surface-strong-rgb: 50 36 30;
1150
+ --usk-surface-soft-rgb: 25 18 15;
1151
+ --usk-text-rgb: 251 245 236;
1152
+ --usk-text-muted-rgb: 211 195 183;
1153
+ --usk-border-rgb: 106 82 62;
1154
+ --usk-primary-rgb: 201 138 93;
1155
+ --usk-primary-hover-rgb: 224 169 126;
1156
+ --usk-primary-text-rgb: 0 0 0;
1157
+ --usk-secondary-rgb: 246 235 215;
1158
+ --usk-secondary-hover-rgb: 255 248 235;
1159
+ --usk-secondary-text-rgb: 0 0 0;
1160
+ --usk-accent-rgb: 231 184 95;
1161
+ --usk-success-rgb: 152 224 182;
1162
+ --usk-warning-rgb: 255 210 122;
1163
+ --usk-danger-rgb: 255 160 154;
1164
+ --usk-link-rgb: 240 200 125;
1165
+ --usk-accent-text-rgb: 0 0 0;
1166
+ --usk-success-text-rgb: 0 0 0;
1167
+ --usk-warning-text-rgb: 0 0 0;
1168
+ --usk-danger-text-rgb: 0 0 0;
1169
+ --usk-focus-rgb: 231 184 95;
1170
+ }
1171
+
1172
+ :where([data-ui][data-theme="heritage-brass"][data-mode="contrast"]) {
1173
+ --usk-bg-rgb: 0 0 0;
1174
+ --usk-surface-rgb: 15 10 7;
1175
+ --usk-surface-strong-rgb: 28 18 13;
1176
+ --usk-surface-soft-rgb: 0 0 0;
1177
+ --usk-text-rgb: 255 255 255;
1178
+ --usk-text-muted-rgb: 255 245 232;
1179
+ --usk-border-rgb: 255 255 255;
1180
+ --usk-primary-rgb: 200 138 54;
1181
+ --usk-primary-hover-rgb: 255 255 255;
1182
+ --usk-primary-text-rgb: 0 0 0;
1183
+ --usk-secondary-rgb: 255 243 217;
1184
+ --usk-secondary-hover-rgb: 255 255 255;
1185
+ --usk-secondary-text-rgb: 0 0 0;
1186
+ --usk-accent-rgb: 255 211 107;
1187
+ --usk-success-rgb: 0 255 144;
1188
+ --usk-warning-rgb: 255 212 0;
1189
+ --usk-danger-rgb: 255 107 107;
1190
+ --usk-link-rgb: 255 211 107;
1191
+ --usk-accent-text-rgb: 0 0 0;
1192
+ --usk-success-text-rgb: 0 0 0;
1193
+ --usk-warning-text-rgb: 0 0 0;
1194
+ --usk-danger-text-rgb: 0 0 0;
1195
+ --usk-focus-rgb: 255 255 255;
1196
+ }
1197
+
1198
+ :where([data-ui][data-theme="service-blue-red"][data-mode="light"]) {
1199
+ --usk-bg-rgb: 245 247 250;
1200
+ --usk-surface-rgb: 255 255 255;
1201
+ --usk-surface-strong-rgb: 252 252 253;
1202
+ --usk-surface-soft-rgb: 232 235 240;
1203
+ --usk-text-rgb: 17 36 59;
1204
+ --usk-text-muted-rgb: 90 104 119;
1205
+ --usk-border-rgb: 200 207 217;
1206
+ --usk-primary-rgb: 13 59 102;
1207
+ --usk-primary-hover-rgb: 11 49 85;
1208
+ --usk-primary-text-rgb: 255 255 255;
1209
+ --usk-secondary-rgb: 214 43 43;
1210
+ --usk-secondary-hover-rgb: 178 35 35;
1211
+ --usk-secondary-text-rgb: 255 255 255;
1212
+ --usk-accent-rgb: 233 90 90;
1213
+ --usk-success-rgb: 47 125 84;
1214
+ --usk-warning-rgb: 164 106 0;
1215
+ --usk-danger-rgb: 198 40 40;
1216
+ --usk-link-rgb: 11 49 85;
1217
+ --usk-accent-text-rgb: 0 0 0;
1218
+ --usk-success-text-rgb: 255 255 255;
1219
+ --usk-warning-text-rgb: 0 0 0;
1220
+ --usk-danger-text-rgb: 255 255 255;
1221
+ --usk-focus-rgb: 214 43 43;
1222
+ }
1223
+
1224
+ :where([data-ui][data-theme="service-blue-red"][data-mode="dark"]) {
1225
+ --usk-bg-rgb: 8 17 28;
1226
+ --usk-surface-rgb: 16 32 48;
1227
+ --usk-surface-strong-rgb: 24 49 73;
1228
+ --usk-surface-soft-rgb: 11 23 36;
1229
+ --usk-text-rgb: 243 247 251;
1230
+ --usk-text-muted-rgb: 188 200 213;
1231
+ --usk-border-rgb: 71 96 121;
1232
+ --usk-primary-rgb: 108 169 227;
1233
+ --usk-primary-hover-rgb: 147 193 237;
1234
+ --usk-primary-text-rgb: 0 0 0;
1235
+ --usk-secondary-rgb: 255 106 106;
1236
+ --usk-secondary-hover-rgb: 255 146 146;
1237
+ --usk-secondary-text-rgb: 0 0 0;
1238
+ --usk-accent-rgb: 255 154 154;
1239
+ --usk-success-rgb: 143 223 182;
1240
+ --usk-warning-rgb: 255 210 122;
1241
+ --usk-danger-rgb: 255 143 143;
1242
+ --usk-link-rgb: 165 203 241;
1243
+ --usk-accent-text-rgb: 0 0 0;
1244
+ --usk-success-text-rgb: 0 0 0;
1245
+ --usk-warning-text-rgb: 0 0 0;
1246
+ --usk-danger-text-rgb: 0 0 0;
1247
+ --usk-focus-rgb: 255 106 106;
1248
+ }
1249
+
1250
+ :where([data-ui][data-theme="service-blue-red"][data-mode="contrast"]) {
1251
+ --usk-bg-rgb: 0 0 0;
1252
+ --usk-surface-rgb: 6 16 26;
1253
+ --usk-surface-strong-rgb: 10 29 48;
1254
+ --usk-surface-soft-rgb: 0 0 0;
1255
+ --usk-text-rgb: 255 255 255;
1256
+ --usk-text-muted-rgb: 238 244 255;
1257
+ --usk-border-rgb: 255 255 255;
1258
+ --usk-primary-rgb: 102 181 255;
1259
+ --usk-primary-hover-rgb: 255 255 255;
1260
+ --usk-primary-text-rgb: 0 0 0;
1261
+ --usk-secondary-rgb: 255 102 102;
1262
+ --usk-secondary-hover-rgb: 255 255 255;
1263
+ --usk-secondary-text-rgb: 0 0 0;
1264
+ --usk-accent-rgb: 255 170 170;
1265
+ --usk-success-rgb: 0 255 144;
1266
+ --usk-warning-rgb: 255 212 0;
1267
+ --usk-danger-rgb: 255 92 92;
1268
+ --usk-link-rgb: 140 198 255;
1269
+ --usk-accent-text-rgb: 0 0 0;
1270
+ --usk-success-text-rgb: 0 0 0;
1271
+ --usk-warning-text-rgb: 0 0 0;
1272
+ --usk-danger-text-rgb: 0 0 0;
1273
+ --usk-focus-rgb: 255 255 255;
1274
+ }
1275
+
1276
+ :where([data-ui][data-theme="newsprint-crimson"][data-mode="light"]) {
1277
+ --usk-bg-rgb: 238 229 212;
1278
+ --usk-surface-rgb: 248 241 229;
1279
+ --usk-surface-strong-rgb: 255 249 238;
1280
+ --usk-surface-soft-rgb: 222 209 188;
1281
+ --usk-text-rgb: 44 38 34;
1282
+ --usk-text-muted-rgb: 99 88 80;
1283
+ --usk-border-rgb: 184 170 152;
1284
+ --usk-primary-rgb: 122 35 41;
1285
+ --usk-primary-hover-rgb: 92 24 29;
1286
+ --usk-primary-text-rgb: 255 255 255;
1287
+ --usk-secondary-rgb: 64 58 54;
1288
+ --usk-secondary-hover-rgb: 45 41 38;
1289
+ --usk-secondary-text-rgb: 255 255 255;
1290
+ --usk-accent-rgb: 199 137 114;
1291
+ --usk-success-rgb: 47 114 82;
1292
+ --usk-warning-rgb: 154 101 0;
1293
+ --usk-danger-rgb: 165 42 50;
1294
+ --usk-link-rgb: 106 30 36;
1295
+ --usk-accent-text-rgb: 0 0 0;
1296
+ --usk-success-text-rgb: 255 255 255;
1297
+ --usk-warning-text-rgb: 255 255 255;
1298
+ --usk-danger-text-rgb: 255 255 255;
1299
+ --usk-focus-rgb: 165 42 50;
1300
+ }
1301
+
1302
+ :where([data-ui][data-theme="newsprint-crimson"][data-mode="dark"]) {
1303
+ --usk-bg-rgb: 22 16 13;
1304
+ --usk-surface-rgb: 33 24 20;
1305
+ --usk-surface-strong-rgb: 48 35 30;
1306
+ --usk-surface-soft-rgb: 26 18 15;
1307
+ --usk-text-rgb: 244 235 221;
1308
+ --usk-text-muted-rgb: 198 184 168;
1309
+ --usk-border-rgb: 106 90 76;
1310
+ --usk-primary-rgb: 216 124 131;
1311
+ --usk-primary-hover-rgb: 238 160 166;
1312
+ --usk-primary-text-rgb: 0 0 0;
1313
+ --usk-secondary-rgb: 200 185 166;
1314
+ --usk-secondary-hover-rgb: 229 214 194;
1315
+ --usk-secondary-text-rgb: 0 0 0;
1316
+ --usk-accent-rgb: 240 165 151;
1317
+ --usk-success-rgb: 138 214 175;
1318
+ --usk-warning-rgb: 255 210 122;
1319
+ --usk-danger-rgb: 255 154 154;
1320
+ --usk-link-rgb: 240 165 151;
1321
+ --usk-accent-text-rgb: 0 0 0;
1322
+ --usk-success-text-rgb: 0 0 0;
1323
+ --usk-warning-text-rgb: 0 0 0;
1324
+ --usk-danger-text-rgb: 0 0 0;
1325
+ --usk-focus-rgb: 240 165 151;
1326
+ }
1327
+
1328
+ :where([data-ui][data-theme="newsprint-crimson"][data-mode="contrast"]) {
1329
+ --usk-bg-rgb: 0 0 0;
1330
+ --usk-surface-rgb: 13 8 6;
1331
+ --usk-surface-strong-rgb: 26 16 12;
1332
+ --usk-surface-soft-rgb: 0 0 0;
1333
+ --usk-text-rgb: 255 255 255;
1334
+ --usk-text-muted-rgb: 255 245 232;
1335
+ --usk-border-rgb: 255 255 255;
1336
+ --usk-primary-rgb: 255 122 132;
1337
+ --usk-primary-hover-rgb: 255 255 255;
1338
+ --usk-primary-text-rgb: 0 0 0;
1339
+ --usk-secondary-rgb: 255 243 218;
1340
+ --usk-secondary-hover-rgb: 255 255 255;
1341
+ --usk-secondary-text-rgb: 0 0 0;
1342
+ --usk-accent-rgb: 255 179 167;
1343
+ --usk-success-rgb: 0 255 144;
1344
+ --usk-warning-rgb: 255 212 0;
1345
+ --usk-danger-rgb: 255 102 102;
1346
+ --usk-link-rgb: 255 154 163;
1347
+ --usk-accent-text-rgb: 0 0 0;
1348
+ --usk-success-text-rgb: 0 0 0;
1349
+ --usk-warning-text-rgb: 0 0 0;
1350
+ --usk-danger-text-rgb: 0 0 0;
1351
+ --usk-focus-rgb: 255 255 255;
1352
+ }
1353
+
1354
+ :where([data-ui][data-theme="foundry-amber"][data-mode="light"]) {
1355
+ --usk-bg-rgb: 241 240 237;
1356
+ --usk-surface-rgb: 255 255 255;
1357
+ --usk-surface-strong-rgb: 250 250 248;
1358
+ --usk-surface-soft-rgb: 223 221 216;
1359
+ --usk-text-rgb: 29 28 26;
1360
+ --usk-text-muted-rgb: 96 93 88;
1361
+ --usk-border-rgb: 167 163 155;
1362
+ --usk-primary-rgb: 169 87 0;
1363
+ --usk-primary-hover-rgb: 134 70 0;
1364
+ --usk-primary-text-rgb: 255 255 255;
1365
+ --usk-secondary-rgb: 58 58 60;
1366
+ --usk-secondary-hover-rgb: 39 39 41;
1367
+ --usk-secondary-text-rgb: 255 255 255;
1368
+ --usk-accent-rgb: 232 154 45;
1369
+ --usk-success-rgb: 47 114 82;
1370
+ --usk-warning-rgb: 154 101 0;
1371
+ --usk-danger-rgb: 173 54 54;
1372
+ --usk-link-rgb: 134 70 0;
1373
+ --usk-accent-text-rgb: 0 0 0;
1374
+ --usk-success-text-rgb: 255 255 255;
1375
+ --usk-warning-text-rgb: 255 255 255;
1376
+ --usk-danger-text-rgb: 255 255 255;
1377
+ --usk-focus-rgb: 232 154 45;
1378
+ }
1379
+
1380
+ :where([data-ui][data-theme="foundry-amber"][data-mode="dark"]) {
1381
+ --usk-bg-rgb: 17 17 19;
1382
+ --usk-surface-rgb: 27 28 31;
1383
+ --usk-surface-strong-rgb: 39 40 44;
1384
+ --usk-surface-soft-rgb: 22 23 26;
1385
+ --usk-text-rgb: 244 242 237;
1386
+ --usk-text-muted-rgb: 187 184 177;
1387
+ --usk-border-rgb: 88 90 95;
1388
+ --usk-primary-rgb: 240 160 58;
1389
+ --usk-primary-hover-rgb: 255 183 95;
1390
+ --usk-primary-text-rgb: 0 0 0;
1391
+ --usk-secondary-rgb: 174 179 184;
1392
+ --usk-secondary-hover-rgb: 208 211 214;
1393
+ --usk-secondary-text-rgb: 0 0 0;
1394
+ --usk-accent-rgb: 255 209 122;
1395
+ --usk-success-rgb: 138 214 175;
1396
+ --usk-warning-rgb: 255 210 122;
1397
+ --usk-danger-rgb: 255 153 153;
1398
+ --usk-link-rgb: 255 209 122;
1399
+ --usk-accent-text-rgb: 0 0 0;
1400
+ --usk-success-text-rgb: 0 0 0;
1401
+ --usk-warning-text-rgb: 0 0 0;
1402
+ --usk-danger-text-rgb: 0 0 0;
1403
+ --usk-focus-rgb: 240 160 58;
1404
+ }
1405
+
1406
+ :where([data-ui][data-theme="foundry-amber"][data-mode="contrast"]) {
1407
+ --usk-bg-rgb: 0 0 0;
1408
+ --usk-surface-rgb: 9 9 9;
1409
+ --usk-surface-strong-rgb: 21 21 21;
1410
+ --usk-surface-soft-rgb: 0 0 0;
1411
+ --usk-text-rgb: 255 255 255;
1412
+ --usk-text-muted-rgb: 244 244 242;
1413
+ --usk-border-rgb: 255 255 255;
1414
+ --usk-primary-rgb: 255 176 0;
1415
+ --usk-primary-hover-rgb: 255 255 255;
1416
+ --usk-primary-text-rgb: 0 0 0;
1417
+ --usk-secondary-rgb: 242 242 242;
1418
+ --usk-secondary-hover-rgb: 255 255 255;
1419
+ --usk-secondary-text-rgb: 0 0 0;
1420
+ --usk-accent-rgb: 255 211 107;
1421
+ --usk-success-rgb: 0 255 144;
1422
+ --usk-warning-rgb: 255 212 0;
1423
+ --usk-danger-rgb: 255 102 102;
1424
+ --usk-link-rgb: 255 194 71;
1425
+ --usk-accent-text-rgb: 0 0 0;
1426
+ --usk-success-text-rgb: 0 0 0;
1427
+ --usk-warning-text-rgb: 0 0 0;
1428
+ --usk-danger-text-rgb: 0 0 0;
1429
+ --usk-focus-rgb: 255 255 255;
1430
+ }
1431
+
1432
+ :where([data-ui][data-theme="soft-orchid"][data-mode="light"]) {
1433
+ --usk-bg-rgb: 247 244 252;
1434
+ --usk-surface-rgb: 255 255 255;
1435
+ --usk-surface-strong-rgb: 252 250 255;
1436
+ --usk-surface-soft-rgb: 233 226 246;
1437
+ --usk-text-rgb: 36 26 58;
1438
+ --usk-text-muted-rgb: 103 92 121;
1439
+ --usk-border-rgb: 207 197 227;
1440
+ --usk-primary-rgb: 101 82 184;
1441
+ --usk-primary-hover-rgb: 75 59 152;
1442
+ --usk-primary-text-rgb: 255 255 255;
1443
+ --usk-secondary-rgb: 105 82 163;
1444
+ --usk-secondary-hover-rgb: 81 63 129;
1445
+ --usk-secondary-text-rgb: 255 255 255;
1446
+ --usk-accent-rgb: 196 156 232;
1447
+ --usk-success-rgb: 62 122 98;
1448
+ --usk-warning-rgb: 152 100 0;
1449
+ --usk-danger-rgb: 168 58 96;
1450
+ --usk-link-rgb: 75 59 152;
1451
+ --usk-accent-text-rgb: 0 0 0;
1452
+ --usk-success-text-rgb: 255 255 255;
1453
+ --usk-warning-text-rgb: 255 255 255;
1454
+ --usk-danger-text-rgb: 255 255 255;
1455
+ --usk-focus-rgb: 141 117 209;
1456
+ }
1457
+
1458
+ :where([data-ui][data-theme="soft-orchid"][data-mode="dark"]) {
1459
+ --usk-bg-rgb: 18 13 29;
1460
+ --usk-surface-rgb: 28 21 43;
1461
+ --usk-surface-strong-rgb: 42 32 64;
1462
+ --usk-surface-soft-rgb: 23 17 34;
1463
+ --usk-text-rgb: 245 240 255;
1464
+ --usk-text-muted-rgb: 196 184 217;
1465
+ --usk-border-rgb: 93 79 120;
1466
+ --usk-primary-rgb: 169 148 242;
1467
+ --usk-primary-hover-rgb: 196 181 255;
1468
+ --usk-primary-text-rgb: 0 0 0;
1469
+ --usk-secondary-rgb: 209 183 245;
1470
+ --usk-secondary-hover-rgb: 229 213 255;
1471
+ --usk-secondary-text-rgb: 0 0 0;
1472
+ --usk-accent-rgb: 231 198 255;
1473
+ --usk-success-rgb: 145 223 184;
1474
+ --usk-warning-rgb: 255 210 122;
1475
+ --usk-danger-rgb: 255 153 183;
1476
+ --usk-link-rgb: 209 183 245;
1477
+ --usk-accent-text-rgb: 0 0 0;
1478
+ --usk-success-text-rgb: 0 0 0;
1479
+ --usk-warning-text-rgb: 0 0 0;
1480
+ --usk-danger-text-rgb: 0 0 0;
1481
+ --usk-focus-rgb: 209 183 245;
1482
+ }
1483
+
1484
+ :where([data-ui][data-theme="soft-orchid"][data-mode="contrast"]) {
1485
+ --usk-bg-rgb: 0 0 0;
1486
+ --usk-surface-rgb: 12 7 20;
1487
+ --usk-surface-strong-rgb: 26 16 40;
1488
+ --usk-surface-soft-rgb: 0 0 0;
1489
+ --usk-text-rgb: 255 255 255;
1490
+ --usk-text-muted-rgb: 247 240 255;
1491
+ --usk-border-rgb: 255 255 255;
1492
+ --usk-primary-rgb: 184 156 255;
1493
+ --usk-primary-hover-rgb: 255 255 255;
1494
+ --usk-primary-text-rgb: 0 0 0;
1495
+ --usk-secondary-rgb: 113 255 226;
1496
+ --usk-secondary-hover-rgb: 255 255 255;
1497
+ --usk-secondary-text-rgb: 0 0 0;
1498
+ --usk-accent-rgb: 255 208 242;
1499
+ --usk-success-rgb: 0 255 144;
1500
+ --usk-warning-rgb: 255 212 0;
1501
+ --usk-danger-rgb: 255 102 139;
1502
+ --usk-link-rgb: 201 181 255;
1503
+ --usk-accent-text-rgb: 0 0 0;
1504
+ --usk-success-text-rgb: 0 0 0;
1505
+ --usk-warning-text-rgb: 0 0 0;
1506
+ --usk-danger-text-rgb: 0 0 0;
1507
+ --usk-focus-rgb: 255 255 255;
1508
+ }
1509
+
1510
+ :where([data-ui][data-theme="electric-noir"][data-mode="light"]) {
1511
+ --usk-bg-rgb: 244 245 248;
1512
+ --usk-surface-rgb: 255 255 255;
1513
+ --usk-surface-strong-rgb: 251 252 255;
1514
+ --usk-surface-soft-rgb: 230 232 240;
1515
+ --usk-text-rgb: 20 17 28;
1516
+ --usk-text-muted-rgb: 95 90 104;
1517
+ --usk-border-rgb: 198 199 209;
1518
+ --usk-primary-rgb: 140 26 120;
1519
+ --usk-primary-hover-rgb: 114 21 98;
1520
+ --usk-primary-text-rgb: 255 255 255;
1521
+ --usk-secondary-rgb: 33 58 85;
1522
+ --usk-secondary-hover-rgb: 23 42 62;
1523
+ --usk-secondary-text-rgb: 255 255 255;
1524
+ --usk-accent-rgb: 46 117 144;
1525
+ --usk-success-rgb: 47 114 82;
1526
+ --usk-warning-rgb: 152 100 0;
1527
+ --usk-danger-rgb: 168 40 90;
1528
+ --usk-link-rgb: 114 21 98;
1529
+ --usk-accent-text-rgb: 255 255 255;
1530
+ --usk-success-text-rgb: 255 255 255;
1531
+ --usk-warning-text-rgb: 255 255 255;
1532
+ --usk-danger-text-rgb: 255 255 255;
1533
+ --usk-focus-rgb: 168 48 160;
1534
+ }
1535
+
1536
+ :where([data-ui][data-theme="electric-noir"][data-mode="dark"]) {
1537
+ --usk-bg-rgb: 9 7 20;
1538
+ --usk-surface-rgb: 17 11 27;
1539
+ --usk-surface-strong-rgb: 27 16 43;
1540
+ --usk-surface-soft-rgb: 13 9 22;
1541
+ --usk-text-rgb: 246 244 250;
1542
+ --usk-text-muted-rgb: 188 179 199;
1543
+ --usk-border-rgb: 75 50 92;
1544
+ --usk-primary-rgb: 226 74 196;
1545
+ --usk-primary-hover-rgb: 255 114 223;
1546
+ --usk-primary-text-rgb: 0 0 0;
1547
+ --usk-secondary-rgb: 75 166 201;
1548
+ --usk-secondary-hover-rgb: 120 197 226;
1549
+ --usk-secondary-text-rgb: 0 0 0;
1550
+ --usk-accent-rgb: 255 122 225;
1551
+ --usk-success-rgb: 138 214 175;
1552
+ --usk-warning-rgb: 255 210 122;
1553
+ --usk-danger-rgb: 255 122 159;
1554
+ --usk-link-rgb: 255 122 225;
1555
+ --usk-accent-text-rgb: 0 0 0;
1556
+ --usk-success-text-rgb: 0 0 0;
1557
+ --usk-warning-text-rgb: 0 0 0;
1558
+ --usk-danger-text-rgb: 0 0 0;
1559
+ --usk-focus-rgb: 255 122 225;
1560
+ }
1561
+
1562
+ :where([data-ui][data-theme="electric-noir"][data-mode="contrast"]) {
1563
+ --usk-bg-rgb: 0 0 0;
1564
+ --usk-surface-rgb: 9 5 18;
1565
+ --usk-surface-strong-rgb: 22 10 36;
1566
+ --usk-surface-soft-rgb: 0 0 0;
1567
+ --usk-text-rgb: 255 255 255;
1568
+ --usk-text-muted-rgb: 248 242 255;
1569
+ --usk-border-rgb: 255 255 255;
1570
+ --usk-primary-rgb: 255 89 215;
1571
+ --usk-primary-hover-rgb: 255 255 255;
1572
+ --usk-primary-text-rgb: 0 0 0;
1573
+ --usk-secondary-rgb: 0 215 255;
1574
+ --usk-secondary-hover-rgb: 255 255 255;
1575
+ --usk-secondary-text-rgb: 0 0 0;
1576
+ --usk-accent-rgb: 255 146 230;
1577
+ --usk-success-rgb: 0 255 144;
1578
+ --usk-warning-rgb: 255 212 0;
1579
+ --usk-danger-rgb: 255 102 139;
1580
+ --usk-link-rgb: 255 123 224;
1581
+ --usk-accent-text-rgb: 0 0 0;
1582
+ --usk-success-text-rgb: 0 0 0;
1583
+ --usk-warning-text-rgb: 0 0 0;
1584
+ --usk-danger-text-rgb: 0 0 0;
1585
+ --usk-focus-rgb: 255 255 255;
1586
+ }
796
1587
  }
797
1588
 
798
1589
 
@@ -838,7 +1629,7 @@
838
1629
  --usk-native-control-padding-inline: .95rem;
839
1630
  --usk-native-subcontrol-padding-block: .55rem;
840
1631
  --usk-native-subcontrol-padding-inline: .8rem;
841
- --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
1632
+ --usk-native-track: var(--usk-native-border);
842
1633
  --usk-native-track-fill: var(--usk-native-primary);
843
1634
  --usk-native-thumb: var(--usk-native-surface-strong);
844
1635
  --usk-native-thumb-border: var(--usk-native-primary);
@@ -846,6 +1637,22 @@
846
1637
  --usk-native-shadow: none;
847
1638
  --usk-native-shadow-md: var(--usk-native-shadow);
848
1639
  --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
1640
+ --usk-motion-duration: 140ms;
1641
+ --usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
1642
+
1643
+ /* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
1644
+ --ui-color-bg: rgb(var(--usk-bg-rgb));
1645
+ --ui-color-surface: var(--usk-native-surface-strong);
1646
+ --ui-color-text: var(--usk-native-text);
1647
+ --ui-color-muted: var(--usk-native-text-muted);
1648
+ --ui-color-primary: var(--usk-native-primary);
1649
+ --ui-color-on-primary: var(--usk-native-on-primary);
1650
+ --ui-color-border: var(--usk-native-border);
1651
+ --ui-radius-control: var(--usk-native-radius);
1652
+ --ui-shadow-control: var(--usk-native-shadow);
1653
+ --ui-focus-color: var(--usk-native-focus);
1654
+ --ui-motion-duration: var(--usk-motion-duration);
1655
+ --ui-motion-easing: var(--usk-motion-easing);
849
1656
  }
850
1657
 
851
1658
  [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) {
@@ -853,7 +1660,10 @@
853
1660
  font-family: var(--usk-native-font-heading);
854
1661
  line-height: 1.15;
855
1662
  margin: 0 0 .65em;
856
- text-wrap: balance;
1663
+ }
1664
+
1665
+ @supports (text-wrap: balance) {
1666
+ [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
857
1667
  }
858
1668
 
859
1669
  [data-ui][data-theme][data-mode] :where(hgroup) {
@@ -901,7 +1711,7 @@
901
1711
  padding: .15em .35em;
902
1712
  color: var(--usk-native-text);
903
1713
  background: var(--usk-native-surface-soft);
904
- border: var(--usk-native-border-width) solid color-mix(in srgb, var(--usk-native-border) 62%, transparent);
1714
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
905
1715
  border-radius: var(--usk-native-radius-sm);
906
1716
  font-family: var(--usk-native-font-mono);
907
1717
  font-size: .92em;
@@ -934,7 +1744,7 @@
934
1744
  [data-ui][data-theme][data-mode] :where(mark) {
935
1745
  padding-inline: .15em;
936
1746
  color: var(--usk-native-text);
937
- background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
1747
+ background: rgb(var(--usk-warning-rgb) / .32);
938
1748
  border-radius: .2em;
939
1749
  }
940
1750
 
@@ -973,7 +1783,7 @@
973
1783
  min-inline-size: 0;
974
1784
  margin: 0 0 1rem;
975
1785
  padding: var(--usk-native-panel-padding);
976
- background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
1786
+ background: var(--usk-native-card-bg);
977
1787
  border: var(--usk-native-border-width) solid var(--usk-native-border);
978
1788
  border-radius: var(--usk-native-radius);
979
1789
  }
@@ -1001,7 +1811,7 @@
1001
1811
  align-items: center;
1002
1812
  }
1003
1813
 
1004
- [data-ui][data-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
1814
+ [data-ui][data-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
1005
1815
  width: 100%;
1006
1816
  min-block-size: var(--usk-native-control-min-block-size);
1007
1817
  padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
@@ -1029,9 +1839,16 @@
1029
1839
 
1030
1840
  [data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
1031
1841
 
1032
- [data-ui][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
1842
+ [data-ui][data-theme][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
1843
+ -webkit-appearance: none;
1844
+ appearance: none;
1845
+ box-sizing: border-box;
1033
1846
  min-block-size: var(--usk-native-control-min-block-size);
1034
1847
  padding: .7rem 1rem;
1848
+ font: inherit;
1849
+ }
1850
+
1851
+ [data-ui][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
1035
1852
  color: var(--usk-native-on-primary);
1036
1853
  background: var(--usk-native-primary);
1037
1854
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
@@ -1041,6 +1858,18 @@
1041
1858
  cursor: pointer;
1042
1859
  }
1043
1860
 
1861
+ /* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
1862
+ [data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
1863
+ display: inline-flex;
1864
+ align-items: center;
1865
+ justify-content: center;
1866
+ gap: .55rem;
1867
+ }
1868
+
1869
+ [data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
1870
+ flex: 0 0 1em;
1871
+ }
1872
+
1044
1873
  [data-ui][data-theme][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
1045
1874
  background: var(--usk-native-primary-hover);
1046
1875
  border-color: var(--usk-native-primary-hover);
@@ -1156,7 +1985,7 @@
1156
1985
  cursor: not-allowed;
1157
1986
  }
1158
1987
 
1159
- [data-ui][data-theme][data-mode] :where(input:read-only, textarea:read-only) {
1988
+ [data-ui][data-theme][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
1160
1989
  background: var(--usk-native-surface-soft);
1161
1990
  }
1162
1991
 
@@ -1182,7 +2011,7 @@
1182
2011
 
1183
2012
  [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
1184
2013
  color: var(--usk-native-text-muted);
1185
- background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2014
+ background: var(--usk-native-surface-soft);
1186
2015
  border-color: var(--usk-native-border);
1187
2016
  box-shadow: none;
1188
2017
  opacity: .55;
@@ -1214,7 +2043,7 @@
1214
2043
 
1215
2044
  [data-ui][data-theme][data-mode] :where(th) {
1216
2045
  color: var(--usk-native-text);
1217
- background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2046
+ background: var(--usk-native-surface-soft);
1218
2047
  }
1219
2048
 
1220
2049
  [data-ui][data-theme][data-mode] :where(td) { color: var(--usk-native-text-muted); }
@@ -1244,6 +2073,8 @@
1244
2073
  box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
1245
2074
  }
1246
2075
 
2076
+ [data-ui][data-theme][data-mode] :where(dialog p) { color: inherit; }
2077
+
1247
2078
  [data-ui][data-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
1248
2079
 
1249
2080
  [data-ui][data-theme][data-mode] :where(progress, meter) {
@@ -1357,6 +2188,32 @@
1357
2188
  [data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
1358
2189
  [data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
1359
2190
 
2191
+ @supports (color: color-mix(in srgb, black, white)) {
2192
+ [data-ui][data-theme][data-mode] {
2193
+ --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
2194
+ }
2195
+
2196
+ [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
2197
+ border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
2198
+ }
2199
+
2200
+ [data-ui][data-theme][data-mode] :where(mark) {
2201
+ background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
2202
+ }
2203
+
2204
+ [data-ui][data-theme][data-mode] :where(fieldset) {
2205
+ background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
2206
+ }
2207
+
2208
+ [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2209
+ background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2210
+ }
2211
+
2212
+ [data-ui][data-theme][data-mode] :where(th) {
2213
+ background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2214
+ }
2215
+ }
2216
+
1360
2217
  @media (prefers-reduced-motion: reduce) {
1361
2218
  [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
1362
2219
  [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
@@ -1365,8 +2222,10 @@
1365
2222
  }
1366
2223
 
1367
2224
  @media (forced-colors: active) {
1368
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
1369
- forced-color-adjust: auto;
2225
+ @supports (forced-color-adjust: auto) {
2226
+ [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
2227
+ forced-color-adjust: auto;
2228
+ }
1370
2229
  }
1371
2230
 
1372
2231
  [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
@@ -1536,7 +2395,7 @@
1536
2395
  [class~="rg-alert"],
1537
2396
  [class~="rg-table-wrap"],
1538
2397
  [class~="rg-nav"]
1539
- ) {
2398
+ ), [data-ui]:where([data-ui="neumorphism"])[data-theme][data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
1540
2399
  max-inline-size: 100%;
1541
2400
  min-inline-size: 0;
1542
2401
  overflow-wrap: anywhere;
@@ -1587,7 +2446,7 @@
1587
2446
  [class~="rg-icon-button"],
1588
2447
  [class~="rg-badge"],
1589
2448
  [class~="rg-nav-link"]
1590
- ) {
2449
+ ), [data-ui]:where([data-ui="neumorphism"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
1591
2450
  max-inline-size: 100%;
1592
2451
  min-inline-size: 0;
1593
2452
  white-space: normal;
@@ -1627,7 +2486,7 @@
1627
2486
  .rg-button,
1628
2487
  .rg-icon-button,
1629
2488
  .rg-button-pill
1630
- ) {
2489
+ ), [data-ui]:where([data-ui="neumorphism"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
1631
2490
  box-sizing: border-box;
1632
2491
  display: inline-flex;
1633
2492
  align-items: center;
@@ -1933,31 +2792,651 @@
1933
2792
  .y2k-rounded-xl { border-radius: var(--y2k-radius-xl); }
1934
2793
  .rg-rounded-xl { border-radius: var(--rg-radius-xl); }
1935
2794
 
1936
- .saas-surface, .saas-surface-sm, .saas-surface-lg { color: var(--saas-text); background: var(--saas-card-bg); border: 1px solid var(--saas-border); }
1937
- .bento-surface, .bento-surface-sm, .bento-surface-lg { color: var(--bento-text); background: var(--bento-card-bg); border: 1px solid var(--bento-border); }
1938
- .max-surface, .max-surface-sm, .max-surface-lg { color: var(--max-text); background: var(--max-card-bg); border: 1px solid var(--max-border); }
1939
- .bau-surface, .bau-surface-sm, .bau-surface-lg { color: var(--bau-text); background: var(--bau-card-bg); border: 1px solid var(--bau-border); }
1940
- .tactile-surface, .tactile-surface-sm, .tactile-surface-lg { color: var(--tactile-text); background: var(--tactile-card-bg); border: 1px solid var(--tactile-border); }
1941
- .neo-surface, .neo-surface-sm, .neo-surface-lg { color: var(--neo-text); background: var(--neo-card-bg); border: 1px solid var(--neo-border); }
1942
- .retro-surface, .retro-surface-sm, .retro-surface-lg { color: var(--retro-text); background: var(--retro-card-bg); border: 1px solid var(--retro-border); }
1943
- .brutal-surface, .brutal-surface-sm, .brutal-surface-lg { color: var(--brutal-text); background: var(--brutal-card-bg); border: 3px solid var(--brutal-border); }
1944
- .cyber-surface, .cyber-surface-sm, .cyber-surface-lg { color: var(--cyber-text); background: var(--cyber-card-bg); border: 1px solid var(--cyber-border); }
1945
- .y2k-surface, .y2k-surface-sm, .y2k-surface-lg { color: var(--y2k-text); background: var(--y2k-card-bg); border: 1px solid var(--y2k-border); }
1946
- .rg-surface, .rg-surface-sm, .rg-surface-lg { color: var(--rg-text); background: var(--rg-card-bg); border: 1px solid var(--rg-border); }
2795
+ .saas-surface, .saas-surface-sm, .saas-surface-lg { color: var(--saas-text); background: var(--saas-card-bg); border: 1px solid var(--saas-border); }
2796
+ .bento-surface, .bento-surface-sm, .bento-surface-lg { color: var(--bento-text); background: var(--bento-card-bg); border: 1px solid var(--bento-border); }
2797
+ .max-surface, .max-surface-sm, .max-surface-lg { color: var(--max-text); background: var(--max-card-bg); border: 1px solid var(--max-border); }
2798
+ .bau-surface, .bau-surface-sm, .bau-surface-lg { color: var(--bau-text); background: var(--bau-card-bg); border: 1px solid var(--bau-border); }
2799
+ .tactile-surface, .tactile-surface-sm, .tactile-surface-lg { color: var(--tactile-text); background: var(--tactile-card-bg); border: 1px solid var(--tactile-border); }
2800
+ .neo-surface, .neo-surface-sm, .neo-surface-lg { color: var(--neo-text); background: var(--neo-card-bg); border: 1px solid var(--neo-border); }
2801
+ .retro-surface, .retro-surface-sm, .retro-surface-lg { color: var(--retro-text); background: var(--retro-card-bg); border: 1px solid var(--retro-border); }
2802
+ .brutal-surface, .brutal-surface-sm, .brutal-surface-lg { color: var(--brutal-text); background: var(--brutal-card-bg); border: 3px solid var(--brutal-border); }
2803
+ .cyber-surface, .cyber-surface-sm, .cyber-surface-lg { color: var(--cyber-text); background: var(--cyber-card-bg); border: 1px solid var(--cyber-border); }
2804
+ .y2k-surface, .y2k-surface-sm, .y2k-surface-lg { color: var(--y2k-text); background: var(--y2k-card-bg); border: 1px solid var(--y2k-border); }
2805
+ .rg-surface, .rg-surface-sm, .rg-surface-lg { color: var(--rg-text); background: var(--rg-card-bg); border: 1px solid var(--rg-border); }
2806
+
2807
+ .saas-bg-primary, .bento-bg-primary, .max-bg-primary, .bau-bg-primary, .tactile-bg-primary, .neo-bg-primary, .retro-bg-primary, .brutal-bg-primary, .cyber-bg-primary, .y2k-bg-primary, .rg-bg-primary { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
2808
+ .saas-bg-secondary, .bento-bg-secondary, .max-bg-secondary, .bau-bg-secondary, .tactile-bg-secondary, .neo-bg-secondary, .retro-bg-secondary, .brutal-bg-secondary, .cyber-bg-secondary, .y2k-bg-secondary, .rg-bg-secondary { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
2809
+ .saas-border, .bento-border, .max-border, .bau-border, .tactile-border, .neo-border, .retro-border, .brutal-border, .cyber-border, .y2k-border, .rg-border { border: var(--usk-native-border-width) solid var(--usk-native-border); }
2810
+ .saas-divider, .bento-divider, .max-divider, .bau-divider, .tactile-divider, .neo-divider, .retro-divider, .brutal-divider, .cyber-divider, .y2k-divider, .rg-divider { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
2811
+ .saas-disabled, .bento-disabled, .max-disabled, .bau-disabled, .tactile-disabled, .neo-disabled, .retro-disabled, .brutal-disabled, .cyber-disabled, .y2k-disabled, .rg-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
2812
+
2813
+ .saas-button-ghost, .bento-button-ghost, .max-button-ghost, .bau-button-ghost, .tactile-button-ghost, .neo-button-ghost, .retro-button-ghost, .brutal-button-ghost, .cyber-button-ghost, .y2k-button-ghost, .rg-button-ghost, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="ghost"]) {
2814
+ color: var(--usk-native-primary);
2815
+ background: transparent;
2816
+ border-color: var(--usk-native-border);
2817
+ }
2818
+
2819
+ .saas-check, .saas-radio, .saas-switch, .bento-check, .bento-radio, .bento-switch, .max-check, .max-radio, .max-switch, .bau-check, .bau-radio, .bau-switch, .tactile-check, .tactile-radio, .tactile-switch, .neo-check, .neo-radio, .neo-switch, .retro-check, .retro-radio, .retro-switch, .brutal-check, .brutal-radio, .brutal-switch, .cyber-check, .cyber-radio, .cyber-switch, .y2k-check, .y2k-radio, .y2k-switch, .rg-check, .rg-radio, .rg-switch, :where([data-ui="neumorphism"]) .ui-check, :where([data-ui="neumorphism"]) .ui-radio, :where([data-ui="neumorphism"]) .ui-switch {
2820
+ display: inline-flex;
2821
+ align-items: center;
2822
+ gap: var(--usk-native-field-gap);
2823
+ min-block-size: 24px;
2824
+ color: var(--usk-native-text);
2825
+ }
2826
+
2827
+ .saas-check-control, .saas-radio-control, .bento-check-control, .bento-radio-control, .max-check-control, .max-radio-control, .bau-check-control, .bau-radio-control, .tactile-check-control, .tactile-radio-control, .neo-check-control, .neo-radio-control, .retro-check-control, .retro-radio-control, .brutal-check-control, .brutal-radio-control, .cyber-check-control, .cyber-radio-control, .y2k-check-control, .y2k-radio-control, .rg-check-control, .rg-radio-control, :where([data-ui="neumorphism"]) .ui-check-control, :where([data-ui="neumorphism"]) .ui-radio-control {
2828
+ inline-size: 1.5rem;
2829
+ block-size: 1.5rem;
2830
+ accent-color: var(--usk-native-primary);
2831
+ }
2832
+
2833
+ .saas-switch-track, .bento-switch-track, .max-switch-track, .bau-switch-track, .tactile-switch-track, .neo-switch-track, .retro-switch-track, .brutal-switch-track, .cyber-switch-track, .y2k-switch-track, .rg-switch-track, :where([data-ui="neumorphism"]) .ui-switch-track {
2834
+ position: relative;
2835
+ display: inline-flex;
2836
+ align-items: center;
2837
+ flex: 0 0 auto;
2838
+ inline-size: 2.75rem;
2839
+ block-size: 1.5rem;
2840
+ padding: .18rem;
2841
+ background: var(--usk-native-track);
2842
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
2843
+ border-radius: 999px;
2844
+ }
2845
+
2846
+ .saas-switch-thumb, .bento-switch-thumb, .max-switch-thumb, .bau-switch-thumb, .tactile-switch-thumb, .neo-switch-thumb, .retro-switch-thumb, .brutal-switch-thumb, .cyber-switch-thumb, .y2k-switch-thumb, .rg-switch-thumb, :where([data-ui="neumorphism"]) .ui-switch-thumb {
2847
+ inline-size: 1rem;
2848
+ block-size: 1rem;
2849
+ background: var(--usk-native-thumb);
2850
+ border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
2851
+ border-radius: 999px;
2852
+ transition: transform 160ms ease;
2853
+ }
2854
+
2855
+ .saas-switch:has(input:checked) .saas-switch-track,
2856
+ .bento-switch:has(input:checked) .bento-switch-track,
2857
+ .max-switch:has(input:checked) .max-switch-track,
2858
+ .bau-switch:has(input:checked) .bau-switch-track,
2859
+ .tactile-switch:has(input:checked) .tactile-switch-track,
2860
+ .neo-switch:has(input:checked) .neo-switch-track,
2861
+ .retro-switch:has(input:checked) .retro-switch-track,
2862
+ .brutal-switch:has(input:checked) .brutal-switch-track,
2863
+ .cyber-switch:has(input:checked) .cyber-switch-track,
2864
+ .y2k-switch:has(input:checked) .y2k-switch-track,
2865
+ .rg-switch:has(input:checked) .rg-switch-track, :where([data-ui="neumorphism"]) .ui-switch:has(input:checked) .ui-switch-track {
2866
+ background: var(--usk-native-track-fill);
2867
+ }
2868
+
2869
+ .saas-sr-only, .saas-visually-hidden, .bento-sr-only, .bento-visually-hidden, .max-sr-only, .max-visually-hidden, .bau-sr-only, .bau-visually-hidden, .tactile-sr-only, .tactile-visually-hidden, .neo-sr-only, .neo-visually-hidden, .retro-sr-only, .retro-visually-hidden, .brutal-sr-only, .brutal-visually-hidden, .cyber-sr-only, .cyber-visually-hidden, .y2k-sr-only, .y2k-visually-hidden, .rg-sr-only, .rg-visually-hidden {
2870
+ position: absolute !important;
2871
+ inline-size: 1px !important;
2872
+ block-size: 1px !important;
2873
+ padding: 0 !important;
2874
+ margin: -1px !important;
2875
+ overflow: hidden !important;
2876
+ clip: rect(0, 0, 0, 0) !important;
2877
+ white-space: nowrap !important;
2878
+ border: 0 !important;
2879
+ }
2880
+
2881
+ .saas-skip-link, .bento-skip-link, .max-skip-link, .bau-skip-link, .tactile-skip-link, .neo-skip-link, .retro-skip-link, .brutal-skip-link, .cyber-skip-link, .y2k-skip-link, .rg-skip-link {
2882
+ position: absolute;
2883
+ inset-block-start: .75rem;
2884
+ inset-inline-start: .75rem;
2885
+ z-index: 1000;
2886
+ padding: .75rem 1rem;
2887
+ color: var(--usk-native-on-primary);
2888
+ background: var(--usk-native-primary);
2889
+ border-radius: var(--usk-native-radius);
2890
+ transform: translateY(calc(-100% - 1rem));
2891
+ }
1947
2892
 
1948
- .saas-bg-primary, .bento-bg-primary, .max-bg-primary, .bau-bg-primary, .tactile-bg-primary, .neo-bg-primary, .retro-bg-primary, .brutal-bg-primary, .cyber-bg-primary, .y2k-bg-primary, .rg-bg-primary { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
1949
- .saas-bg-secondary, .bento-bg-secondary, .max-bg-secondary, .bau-bg-secondary, .tactile-bg-secondary, .neo-bg-secondary, .retro-bg-secondary, .brutal-bg-secondary, .cyber-bg-secondary, .y2k-bg-secondary, .rg-bg-secondary { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
1950
- .saas-border, .bento-border, .max-border, .bau-border, .tactile-border, .neo-border, .retro-border, .brutal-border, .cyber-border, .y2k-border, .rg-border { border: var(--usk-native-border-width) solid var(--usk-native-border); }
1951
- .saas-divider, .bento-divider, .max-divider, .bau-divider, .tactile-divider, .neo-divider, .retro-divider, .brutal-divider, .cyber-divider, .y2k-divider, .rg-divider { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
1952
- .saas-disabled, .bento-disabled, .max-disabled, .bau-disabled, .tactile-disabled, .neo-disabled, .retro-disabled, .brutal-disabled, .cyber-disabled, .y2k-disabled, .rg-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
2893
+ .saas-skip-link:focus-visible, .bento-skip-link:focus-visible, .max-skip-link:focus-visible, .bau-skip-link:focus-visible, .tactile-skip-link:focus-visible, .neo-skip-link:focus-visible, .retro-skip-link:focus-visible, .brutal-skip-link:focus-visible, .cyber-skip-link:focus-visible, .y2k-skip-link:focus-visible, .rg-skip-link:focus-visible {
2894
+ transform: translateY(0);
2895
+ }
2896
+ }
1953
2897
 
1954
- .saas-button-ghost, .bento-button-ghost, .max-button-ghost, .bau-button-ghost, .tactile-button-ghost, .neo-button-ghost, .retro-button-ghost, .brutal-button-ghost, .cyber-button-ghost, .y2k-button-ghost, .rg-button-ghost {
1955
- color: var(--usk-native-primary);
1956
- background: transparent;
1957
- border-color: var(--usk-native-border);
2898
+ /* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
2899
+ /* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
2900
+ @layer ui-style-kit.components {
2901
+ [data-ui][data-theme][data-mode] :where(
2902
+ .luxe-surface,
2903
+ .luxe-surface-sm,
2904
+ .luxe-surface-lg,
2905
+ .luxe-card,
2906
+ .luxe-card-service,
2907
+ .luxe-card-feature,
2908
+ .luxe-panel,
2909
+ .luxe-toolbar,
2910
+ .luxe-well,
2911
+ .luxe-inset,
2912
+ .luxe-field,
2913
+ .luxe-alert,
2914
+ .luxe-table-wrap,
2915
+ .luxe-nav,
2916
+ .luxe-feature-strip,
2917
+ .luxe-feature-item,
2918
+ .luxe-callout-bar,
2919
+ .luxe-media-scrim,
2920
+ .organic-surface,
2921
+ .organic-surface-sm,
2922
+ .organic-surface-lg,
2923
+ .organic-card,
2924
+ .organic-card-service,
2925
+ .organic-card-feature,
2926
+ .organic-panel,
2927
+ .organic-toolbar,
2928
+ .organic-well,
2929
+ .organic-inset,
2930
+ .organic-field,
2931
+ .organic-alert,
2932
+ .organic-table-wrap,
2933
+ .organic-nav,
2934
+ .organic-feature-strip,
2935
+ .organic-feature-item,
2936
+ .organic-callout-bar,
2937
+ .organic-media-scrim,
2938
+ .utility-surface,
2939
+ .utility-surface-sm,
2940
+ .utility-surface-lg,
2941
+ .utility-card,
2942
+ .utility-card-service,
2943
+ .utility-card-feature,
2944
+ .utility-panel,
2945
+ .utility-toolbar,
2946
+ .utility-well,
2947
+ .utility-inset,
2948
+ .utility-field,
2949
+ .utility-alert,
2950
+ .utility-table-wrap,
2951
+ .utility-nav,
2952
+ .utility-feature-strip,
2953
+ .utility-feature-item,
2954
+ .utility-callout-bar,
2955
+ .utility-media-scrim,
2956
+ .blueprint-surface,
2957
+ .blueprint-surface-sm,
2958
+ .blueprint-surface-lg,
2959
+ .blueprint-card,
2960
+ .blueprint-card-service,
2961
+ .blueprint-card-feature,
2962
+ .blueprint-panel,
2963
+ .blueprint-toolbar,
2964
+ .blueprint-well,
2965
+ .blueprint-inset,
2966
+ .blueprint-field,
2967
+ .blueprint-alert,
2968
+ .blueprint-table-wrap,
2969
+ .blueprint-nav,
2970
+ .blueprint-feature-strip,
2971
+ .blueprint-feature-item,
2972
+ .blueprint-callout-bar,
2973
+ .blueprint-media-scrim,
2974
+ .deco-surface,
2975
+ .deco-surface-sm,
2976
+ .deco-surface-lg,
2977
+ .deco-card,
2978
+ .deco-card-service,
2979
+ .deco-card-feature,
2980
+ .deco-panel,
2981
+ .deco-toolbar,
2982
+ .deco-well,
2983
+ .deco-inset,
2984
+ .deco-field,
2985
+ .deco-alert,
2986
+ .deco-table-wrap,
2987
+ .deco-nav,
2988
+ .deco-feature-strip,
2989
+ .deco-feature-item,
2990
+ .deco-callout-bar,
2991
+ .deco-media-scrim,
2992
+ .clay-surface,
2993
+ .clay-surface-sm,
2994
+ .clay-surface-lg,
2995
+ .clay-card,
2996
+ .clay-card-service,
2997
+ .clay-card-feature,
2998
+ .clay-panel,
2999
+ .clay-toolbar,
3000
+ .clay-well,
3001
+ .clay-inset,
3002
+ .clay-field,
3003
+ .clay-alert,
3004
+ .clay-table-wrap,
3005
+ .clay-nav,
3006
+ .clay-feature-strip,
3007
+ .clay-feature-item,
3008
+ .clay-callout-bar,
3009
+ .clay-media-scrim,
3010
+ .terminal-surface,
3011
+ .terminal-surface-sm,
3012
+ .terminal-surface-lg,
3013
+ .terminal-card,
3014
+ .terminal-card-service,
3015
+ .terminal-card-feature,
3016
+ .terminal-panel,
3017
+ .terminal-toolbar,
3018
+ .terminal-well,
3019
+ .terminal-inset,
3020
+ .terminal-field,
3021
+ .terminal-alert,
3022
+ .terminal-table-wrap,
3023
+ .terminal-nav,
3024
+ .terminal-feature-strip,
3025
+ .terminal-feature-item,
3026
+ .terminal-callout-bar,
3027
+ .terminal-media-scrim,
3028
+ .paper-surface,
3029
+ .paper-surface-sm,
3030
+ .paper-surface-lg,
3031
+ .paper-card,
3032
+ .paper-card-service,
3033
+ .paper-card-feature,
3034
+ .paper-panel,
3035
+ .paper-toolbar,
3036
+ .paper-well,
3037
+ .paper-inset,
3038
+ .paper-field,
3039
+ .paper-alert,
3040
+ .paper-table-wrap,
3041
+ .paper-nav,
3042
+ .paper-feature-strip,
3043
+ .paper-feature-item,
3044
+ .paper-callout-bar,
3045
+ .paper-media-scrim,
3046
+ .noir-surface,
3047
+ .noir-surface-sm,
3048
+ .noir-surface-lg,
3049
+ .noir-card,
3050
+ .noir-card-service,
3051
+ .noir-card-feature,
3052
+ .noir-panel,
3053
+ .noir-toolbar,
3054
+ .noir-well,
3055
+ .noir-inset,
3056
+ .noir-field,
3057
+ .noir-alert,
3058
+ .noir-table-wrap,
3059
+ .noir-nav,
3060
+ .noir-feature-strip,
3061
+ .noir-feature-item,
3062
+ .noir-callout-bar,
3063
+ .noir-media-scrim
3064
+ ), [data-ui]:where([data-ui="neumorphism"])[data-theme][data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
3065
+ max-inline-size: 100%;
3066
+ min-inline-size: 0;
3067
+ overflow-wrap: anywhere;
3068
+ }
3069
+
3070
+ [data-ui][data-theme][data-mode] :where(
3071
+ .luxe-button,
3072
+ .luxe-icon-button,
3073
+ .luxe-button-cut,
3074
+ .luxe-button-outline-heavy,
3075
+ .luxe-badge,
3076
+ .luxe-badge-seal,
3077
+ .luxe-nav-link,
3078
+ .luxe-icon-medallion,
3079
+ .organic-button,
3080
+ .organic-icon-button,
3081
+ .organic-button-cut,
3082
+ .organic-button-outline-heavy,
3083
+ .organic-badge,
3084
+ .organic-badge-seal,
3085
+ .organic-nav-link,
3086
+ .organic-icon-medallion,
3087
+ .utility-button,
3088
+ .utility-icon-button,
3089
+ .utility-button-cut,
3090
+ .utility-button-outline-heavy,
3091
+ .utility-badge,
3092
+ .utility-badge-seal,
3093
+ .utility-nav-link,
3094
+ .utility-icon-medallion,
3095
+ .blueprint-button,
3096
+ .blueprint-icon-button,
3097
+ .blueprint-button-cut,
3098
+ .blueprint-button-outline-heavy,
3099
+ .blueprint-badge,
3100
+ .blueprint-badge-seal,
3101
+ .blueprint-nav-link,
3102
+ .blueprint-icon-medallion,
3103
+ .deco-button,
3104
+ .deco-icon-button,
3105
+ .deco-button-cut,
3106
+ .deco-button-outline-heavy,
3107
+ .deco-badge,
3108
+ .deco-badge-seal,
3109
+ .deco-nav-link,
3110
+ .deco-icon-medallion,
3111
+ .clay-button,
3112
+ .clay-icon-button,
3113
+ .clay-button-cut,
3114
+ .clay-button-outline-heavy,
3115
+ .clay-badge,
3116
+ .clay-badge-seal,
3117
+ .clay-nav-link,
3118
+ .clay-icon-medallion,
3119
+ .terminal-button,
3120
+ .terminal-icon-button,
3121
+ .terminal-button-cut,
3122
+ .terminal-button-outline-heavy,
3123
+ .terminal-badge,
3124
+ .terminal-badge-seal,
3125
+ .terminal-nav-link,
3126
+ .terminal-icon-medallion,
3127
+ .paper-button,
3128
+ .paper-icon-button,
3129
+ .paper-button-cut,
3130
+ .paper-button-outline-heavy,
3131
+ .paper-badge,
3132
+ .paper-badge-seal,
3133
+ .paper-nav-link,
3134
+ .paper-icon-medallion,
3135
+ .noir-button,
3136
+ .noir-icon-button,
3137
+ .noir-button-cut,
3138
+ .noir-button-outline-heavy,
3139
+ .noir-badge,
3140
+ .noir-badge-seal,
3141
+ .noir-nav-link,
3142
+ .noir-icon-medallion
3143
+ ), [data-ui]:where([data-ui="neumorphism"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
3144
+ max-inline-size: 100%;
3145
+ min-inline-size: 0;
3146
+ white-space: normal;
3147
+ }
3148
+
3149
+ [data-ui][data-theme][data-mode] :where(
3150
+ .luxe-button,
3151
+ .luxe-icon-button,
3152
+ .luxe-button-pill,
3153
+ .organic-button,
3154
+ .organic-icon-button,
3155
+ .organic-button-pill,
3156
+ .utility-button,
3157
+ .utility-icon-button,
3158
+ .utility-button-pill,
3159
+ .blueprint-button,
3160
+ .blueprint-icon-button,
3161
+ .blueprint-button-pill,
3162
+ .deco-button,
3163
+ .deco-icon-button,
3164
+ .deco-button-pill,
3165
+ .clay-button,
3166
+ .clay-icon-button,
3167
+ .clay-button-pill,
3168
+ .terminal-button,
3169
+ .terminal-icon-button,
3170
+ .terminal-button-pill,
3171
+ .paper-button,
3172
+ .paper-icon-button,
3173
+ .paper-button-pill,
3174
+ .noir-button,
3175
+ .noir-icon-button,
3176
+ .noir-button-pill
3177
+ ), [data-ui]:where([data-ui="neumorphism"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
3178
+ box-sizing: border-box;
3179
+ display: inline-flex;
3180
+ align-items: center;
3181
+ justify-content: center;
3182
+ gap: .55rem;
3183
+ min-inline-size: 0;
3184
+ max-inline-size: 100%;
3185
+ line-height: 1.15;
3186
+ vertical-align: middle;
1958
3187
  }
1959
3188
 
1960
- .saas-check, .saas-radio, .saas-switch, .bento-check, .bento-radio, .bento-switch, .max-check, .max-radio, .max-switch, .bau-check, .bau-radio, .bau-switch, .tactile-check, .tactile-radio, .tactile-switch, .neo-check, .neo-radio, .neo-switch, .retro-check, .retro-radio, .retro-switch, .brutal-check, .brutal-radio, .brutal-switch, .cyber-check, .cyber-radio, .cyber-switch, .y2k-check, .y2k-radio, .y2k-switch, .rg-check, .rg-radio, .rg-switch {
3189
+ [data-ui][data-theme][data-mode] :where(
3190
+ .luxe-button-pill,
3191
+ .organic-button-pill,
3192
+ .utility-button-pill,
3193
+ .blueprint-button-pill,
3194
+ .deco-button-pill,
3195
+ .clay-button-pill,
3196
+ .terminal-button-pill,
3197
+ .paper-button-pill,
3198
+ .noir-button-pill
3199
+ ) {
3200
+ min-block-size: 44px;
3201
+ padding-block: .65rem;
3202
+ padding-inline: max(1rem, 1em);
3203
+ border-style: solid;
3204
+ border-width: 1px;
3205
+ border-radius: 999px;
3206
+ font: inherit;
3207
+ font-weight: 850;
3208
+ text-align: center;
3209
+ text-decoration: none;
3210
+ overflow-wrap: anywhere;
3211
+ white-space: normal;
3212
+ cursor: pointer;
3213
+ transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
3214
+ }
3215
+
3216
+ .luxe-button-pill { color: var(--luxe-on-primary); background: var(--luxe-primary); border-color: var(--luxe-primary); border-radius: var(--luxe-radius-pill); }
3217
+ .luxe-button-pill:hover { border-color: var(--luxe-primary-hover); filter: brightness(1.04); }
3218
+ .luxe-button-pill:focus-visible { outline: 3px solid var(--luxe-focus); outline-offset: 3px; box-shadow: var(--luxe-focus-ring); }
3219
+ .luxe-pill { border-radius: var(--luxe-radius-pill); }
3220
+ .luxe-rounded { border-radius: var(--luxe-radius-md); }
3221
+ .luxe-rounded-lg { border-radius: var(--luxe-radius-lg); }
3222
+ .luxe-rounded-xl { border-radius: var(--luxe-radius-xl); }
3223
+ .luxe-surface, .luxe-surface-sm, .luxe-surface-lg { color: var(--luxe-text); background: var(--luxe-card-bg); border: 1px solid var(--luxe-border); }
3224
+
3225
+ .organic-button-pill { color: var(--organic-on-primary); background: var(--organic-primary); border-color: var(--organic-primary); border-radius: var(--organic-radius-pill); }
3226
+ .organic-button-pill:hover { border-color: var(--organic-primary-hover); filter: brightness(1.04); }
3227
+ .organic-button-pill:focus-visible { outline: 3px solid var(--organic-focus); outline-offset: 3px; box-shadow: var(--organic-focus-ring); }
3228
+ .organic-pill { border-radius: var(--organic-radius-pill); }
3229
+ .organic-rounded { border-radius: var(--organic-radius-md); }
3230
+ .organic-rounded-lg { border-radius: var(--organic-radius-lg); }
3231
+ .organic-rounded-xl { border-radius: var(--organic-radius-xl); }
3232
+ .organic-surface, .organic-surface-sm, .organic-surface-lg { color: var(--organic-text); background: var(--organic-card-bg); border: 1px solid var(--organic-border); }
3233
+
3234
+ .utility-button-pill { color: var(--utility-on-primary); background: var(--utility-primary); border-color: var(--utility-primary); border-radius: var(--utility-radius-pill); }
3235
+ .utility-button-pill:hover { border-color: var(--utility-primary-hover); filter: brightness(1.04); }
3236
+ .utility-button-pill:focus-visible { outline: 3px solid var(--utility-focus); outline-offset: 3px; box-shadow: var(--utility-focus-ring); }
3237
+ .utility-pill { border-radius: var(--utility-radius-pill); }
3238
+ .utility-rounded { border-radius: var(--utility-radius-md); }
3239
+ .utility-rounded-lg { border-radius: var(--utility-radius-lg); }
3240
+ .utility-rounded-xl { border-radius: var(--utility-radius-xl); }
3241
+ .utility-surface, .utility-surface-sm, .utility-surface-lg { color: var(--utility-text); background: var(--utility-card-bg); border: 1px solid var(--utility-border); }
3242
+
3243
+ .blueprint-button-pill { color: var(--blueprint-on-primary); background: var(--blueprint-primary); border-color: var(--blueprint-primary); border-radius: var(--blueprint-radius-pill); }
3244
+ .blueprint-button-pill:hover { border-color: var(--blueprint-primary-hover); filter: brightness(1.04); }
3245
+ .blueprint-button-pill:focus-visible { outline: 3px solid var(--blueprint-focus); outline-offset: 3px; box-shadow: var(--blueprint-focus-ring); }
3246
+ .blueprint-pill { border-radius: var(--blueprint-radius-pill); }
3247
+ .blueprint-rounded { border-radius: var(--blueprint-radius-md); }
3248
+ .blueprint-rounded-lg { border-radius: var(--blueprint-radius-lg); }
3249
+ .blueprint-rounded-xl { border-radius: var(--blueprint-radius-xl); }
3250
+ .blueprint-surface, .blueprint-surface-sm, .blueprint-surface-lg { color: var(--blueprint-text); background: var(--blueprint-card-bg); border: 1px solid var(--blueprint-border); }
3251
+
3252
+ .deco-button-pill { color: var(--deco-on-primary); background: var(--deco-primary); border-color: var(--deco-primary); border-radius: var(--deco-radius-pill); }
3253
+ .deco-button-pill:hover { border-color: var(--deco-primary-hover); filter: brightness(1.04); }
3254
+ .deco-button-pill:focus-visible { outline: 3px solid var(--deco-focus); outline-offset: 3px; box-shadow: var(--deco-focus-ring); }
3255
+ .deco-pill { border-radius: var(--deco-radius-pill); }
3256
+ .deco-rounded { border-radius: var(--deco-radius-md); }
3257
+ .deco-rounded-lg { border-radius: var(--deco-radius-lg); }
3258
+ .deco-rounded-xl { border-radius: var(--deco-radius-xl); }
3259
+ .deco-surface, .deco-surface-sm, .deco-surface-lg { color: var(--deco-text); background: var(--deco-card-bg); border: 1px solid var(--deco-border); }
3260
+
3261
+ .clay-button-pill { color: var(--clay-on-primary); background: var(--clay-primary); border-color: var(--clay-primary); border-radius: var(--clay-radius-pill); }
3262
+ .clay-button-pill:hover { border-color: var(--clay-primary-hover); filter: brightness(1.04); }
3263
+ .clay-button-pill:focus-visible { outline: 3px solid var(--clay-focus); outline-offset: 3px; box-shadow: var(--clay-focus-ring); }
3264
+ .clay-pill { border-radius: var(--clay-radius-pill); }
3265
+ .clay-rounded { border-radius: var(--clay-radius-md); }
3266
+ .clay-rounded-lg { border-radius: var(--clay-radius-lg); }
3267
+ .clay-rounded-xl { border-radius: var(--clay-radius-xl); }
3268
+ .clay-surface, .clay-surface-sm, .clay-surface-lg { color: var(--clay-text); background: var(--clay-card-bg); border: 1px solid var(--clay-border); }
3269
+
3270
+ .terminal-button-pill { color: var(--terminal-on-primary); background: var(--terminal-primary); border-color: var(--terminal-primary); border-radius: var(--terminal-radius-pill); }
3271
+ .terminal-button-pill:hover { border-color: var(--terminal-primary-hover); filter: brightness(1.04); }
3272
+ .terminal-button-pill:focus-visible { outline: 3px solid var(--terminal-focus); outline-offset: 3px; box-shadow: var(--terminal-focus-ring); }
3273
+ .terminal-pill { border-radius: var(--terminal-radius-pill); }
3274
+ .terminal-rounded { border-radius: var(--terminal-radius-md); }
3275
+ .terminal-rounded-lg { border-radius: var(--terminal-radius-lg); }
3276
+ .terminal-rounded-xl { border-radius: var(--terminal-radius-xl); }
3277
+ .terminal-surface, .terminal-surface-sm, .terminal-surface-lg { color: var(--terminal-text); background: var(--terminal-card-bg); border: 1px solid var(--terminal-border); }
3278
+
3279
+ .paper-button-pill { color: var(--paper-on-primary); background: var(--paper-primary); border-color: var(--paper-primary); border-radius: var(--paper-radius-pill); }
3280
+ .paper-button-pill:hover { border-color: var(--paper-primary-hover); filter: brightness(1.04); }
3281
+ .paper-button-pill:focus-visible { outline: 3px solid var(--paper-focus); outline-offset: 3px; box-shadow: var(--paper-focus-ring); }
3282
+ .paper-pill { border-radius: var(--paper-radius-pill); }
3283
+ .paper-rounded { border-radius: var(--paper-radius-md); }
3284
+ .paper-rounded-lg { border-radius: var(--paper-radius-lg); }
3285
+ .paper-rounded-xl { border-radius: var(--paper-radius-xl); }
3286
+ .paper-surface, .paper-surface-sm, .paper-surface-lg { color: var(--paper-text); background: var(--paper-card-bg); border: 1px solid var(--paper-border); }
3287
+
3288
+ .noir-button-pill { color: var(--noir-on-primary); background: var(--noir-primary); border-color: var(--noir-primary); border-radius: var(--noir-radius-pill); }
3289
+ .noir-button-pill:hover { border-color: var(--noir-primary-hover); filter: brightness(1.04); }
3290
+ .noir-button-pill:focus-visible { outline: 3px solid var(--noir-focus); outline-offset: 3px; box-shadow: var(--noir-focus-ring); }
3291
+ .noir-pill { border-radius: var(--noir-radius-pill); }
3292
+ .noir-rounded { border-radius: var(--noir-radius-md); }
3293
+ .noir-rounded-lg { border-radius: var(--noir-radius-lg); }
3294
+ .noir-rounded-xl { border-radius: var(--noir-radius-xl); }
3295
+ .noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
3296
+
3297
+ [data-ui][data-theme][data-mode] :where(
3298
+ .luxe-button-pill:active,
3299
+ .luxe-button-pill[aria-pressed="true"],
3300
+ .organic-button-pill:active,
3301
+ .organic-button-pill[aria-pressed="true"],
3302
+ .utility-button-pill:active,
3303
+ .utility-button-pill[aria-pressed="true"],
3304
+ .blueprint-button-pill:active,
3305
+ .blueprint-button-pill[aria-pressed="true"],
3306
+ .deco-button-pill:active,
3307
+ .deco-button-pill[aria-pressed="true"],
3308
+ .clay-button-pill:active,
3309
+ .clay-button-pill[aria-pressed="true"],
3310
+ .terminal-button-pill:active,
3311
+ .terminal-button-pill[aria-pressed="true"],
3312
+ .paper-button-pill:active,
3313
+ .paper-button-pill[aria-pressed="true"],
3314
+ .noir-button-pill:active,
3315
+ .noir-button-pill[aria-pressed="true"]
3316
+ ) { transform: translateY(1px); }
3317
+
3318
+ [data-ui][data-theme][data-mode] :where(
3319
+ .luxe-button-pill:disabled,
3320
+ .luxe-button-pill[aria-disabled="true"],
3321
+ .organic-button-pill:disabled,
3322
+ .organic-button-pill[aria-disabled="true"],
3323
+ .utility-button-pill:disabled,
3324
+ .utility-button-pill[aria-disabled="true"],
3325
+ .blueprint-button-pill:disabled,
3326
+ .blueprint-button-pill[aria-disabled="true"],
3327
+ .deco-button-pill:disabled,
3328
+ .deco-button-pill[aria-disabled="true"],
3329
+ .clay-button-pill:disabled,
3330
+ .clay-button-pill[aria-disabled="true"],
3331
+ .terminal-button-pill:disabled,
3332
+ .terminal-button-pill[aria-disabled="true"],
3333
+ .paper-button-pill:disabled,
3334
+ .paper-button-pill[aria-disabled="true"],
3335
+ .noir-button-pill:disabled,
3336
+ .noir-button-pill[aria-disabled="true"]
3337
+ ) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
3338
+
3339
+ [data-ui][data-theme][data-mode] :where(
3340
+ .luxe-tooltip,
3341
+ .luxe-tooltip-top,
3342
+ .luxe-tooltip-right,
3343
+ .luxe-tooltip-bottom,
3344
+ .luxe-tooltip-left,
3345
+ .organic-tooltip,
3346
+ .organic-tooltip-top,
3347
+ .organic-tooltip-right,
3348
+ .organic-tooltip-bottom,
3349
+ .organic-tooltip-left,
3350
+ .utility-tooltip,
3351
+ .utility-tooltip-top,
3352
+ .utility-tooltip-right,
3353
+ .utility-tooltip-bottom,
3354
+ .utility-tooltip-left,
3355
+ .blueprint-tooltip,
3356
+ .blueprint-tooltip-top,
3357
+ .blueprint-tooltip-right,
3358
+ .blueprint-tooltip-bottom,
3359
+ .blueprint-tooltip-left,
3360
+ .deco-tooltip,
3361
+ .deco-tooltip-top,
3362
+ .deco-tooltip-right,
3363
+ .deco-tooltip-bottom,
3364
+ .deco-tooltip-left,
3365
+ .clay-tooltip,
3366
+ .clay-tooltip-top,
3367
+ .clay-tooltip-right,
3368
+ .clay-tooltip-bottom,
3369
+ .clay-tooltip-left,
3370
+ .terminal-tooltip,
3371
+ .terminal-tooltip-top,
3372
+ .terminal-tooltip-right,
3373
+ .terminal-tooltip-bottom,
3374
+ .terminal-tooltip-left,
3375
+ .paper-tooltip,
3376
+ .paper-tooltip-top,
3377
+ .paper-tooltip-right,
3378
+ .paper-tooltip-bottom,
3379
+ .paper-tooltip-left,
3380
+ .noir-tooltip,
3381
+ .noir-tooltip-top,
3382
+ .noir-tooltip-right,
3383
+ .noir-tooltip-bottom,
3384
+ .noir-tooltip-left
3385
+ ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: anywhere; }
3386
+
3387
+ [data-ui][data-theme][data-mode] :where(
3388
+ [data-ui-tooltip-anchor] > .luxe-tooltip-top,
3389
+ [data-ui-tooltip-anchor] > .luxe-tooltip-right,
3390
+ [data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
3391
+ [data-ui-tooltip-anchor] > .luxe-tooltip-left,
3392
+ [data-ui-tooltip-anchor] > .organic-tooltip-top,
3393
+ [data-ui-tooltip-anchor] > .organic-tooltip-right,
3394
+ [data-ui-tooltip-anchor] > .organic-tooltip-bottom,
3395
+ [data-ui-tooltip-anchor] > .organic-tooltip-left,
3396
+ [data-ui-tooltip-anchor] > .utility-tooltip-top,
3397
+ [data-ui-tooltip-anchor] > .utility-tooltip-right,
3398
+ [data-ui-tooltip-anchor] > .utility-tooltip-bottom,
3399
+ [data-ui-tooltip-anchor] > .utility-tooltip-left,
3400
+ [data-ui-tooltip-anchor] > .blueprint-tooltip-top,
3401
+ [data-ui-tooltip-anchor] > .blueprint-tooltip-right,
3402
+ [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom,
3403
+ [data-ui-tooltip-anchor] > .blueprint-tooltip-left,
3404
+ [data-ui-tooltip-anchor] > .deco-tooltip-top,
3405
+ [data-ui-tooltip-anchor] > .deco-tooltip-right,
3406
+ [data-ui-tooltip-anchor] > .deco-tooltip-bottom,
3407
+ [data-ui-tooltip-anchor] > .deco-tooltip-left,
3408
+ [data-ui-tooltip-anchor] > .clay-tooltip-top,
3409
+ [data-ui-tooltip-anchor] > .clay-tooltip-right,
3410
+ [data-ui-tooltip-anchor] > .clay-tooltip-bottom,
3411
+ [data-ui-tooltip-anchor] > .clay-tooltip-left,
3412
+ [data-ui-tooltip-anchor] > .terminal-tooltip-top,
3413
+ [data-ui-tooltip-anchor] > .terminal-tooltip-right,
3414
+ [data-ui-tooltip-anchor] > .terminal-tooltip-bottom,
3415
+ [data-ui-tooltip-anchor] > .terminal-tooltip-left,
3416
+ [data-ui-tooltip-anchor] > .paper-tooltip-top,
3417
+ [data-ui-tooltip-anchor] > .paper-tooltip-right,
3418
+ [data-ui-tooltip-anchor] > .paper-tooltip-bottom,
3419
+ [data-ui-tooltip-anchor] > .paper-tooltip-left,
3420
+ [data-ui-tooltip-anchor] > .noir-tooltip-top,
3421
+ [data-ui-tooltip-anchor] > .noir-tooltip-right,
3422
+ [data-ui-tooltip-anchor] > .noir-tooltip-bottom,
3423
+ [data-ui-tooltip-anchor] > .noir-tooltip-left
3424
+ ) { position: absolute; z-index: 20; }
3425
+
3426
+ [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3427
+ [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3428
+ [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3429
+ [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3430
+
3431
+ :where(.luxe-bg-primary, .organic-bg-primary, .utility-bg-primary, .blueprint-bg-primary, .deco-bg-primary, .clay-bg-primary, .terminal-bg-primary, .paper-bg-primary, .noir-bg-primary) { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
3432
+ :where(.luxe-bg-secondary, .organic-bg-secondary, .utility-bg-secondary, .blueprint-bg-secondary, .deco-bg-secondary, .clay-bg-secondary, .terminal-bg-secondary, .paper-bg-secondary, .noir-bg-secondary) { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
3433
+ :where(.luxe-border, .organic-border, .utility-border, .blueprint-border, .deco-border, .clay-border, .terminal-border, .paper-border, .noir-border) { border: var(--usk-native-border-width) solid var(--usk-native-border); }
3434
+ :where(.luxe-divider, .organic-divider, .utility-divider, .blueprint-divider, .deco-divider, .clay-divider, .terminal-divider, .paper-divider, .noir-divider) { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
3435
+ :where(.luxe-disabled, .organic-disabled, .utility-disabled, .blueprint-disabled, .deco-disabled, .clay-disabled, .terminal-disabled, .paper-disabled, .noir-disabled) { opacity: .55; cursor: not-allowed; pointer-events: none; }
3436
+
3437
+ :where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost), :where([data-ui="neumorphism"]) :where(.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"])) { color: var(--usk-native-primary); background: transparent; border-color: var(--usk-native-border); }
3438
+
3439
+ :where(.luxe-check, .luxe-radio, .luxe-switch, .organic-check, .organic-radio, .organic-switch, .utility-check, .utility-radio, .utility-switch, .blueprint-check, .blueprint-radio, .blueprint-switch, .deco-check, .deco-radio, .deco-switch, .clay-check, .clay-radio, .clay-switch, .terminal-check, .terminal-radio, .terminal-switch, .paper-check, .paper-radio, .paper-switch, .noir-check, .noir-radio, .noir-switch), :where([data-ui="neumorphism"]) :where(.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch) {
1961
3440
  display: inline-flex;
1962
3441
  align-items: center;
1963
3442
  gap: var(--usk-native-field-gap);
@@ -1965,16 +3444,17 @@
1965
3444
  color: var(--usk-native-text);
1966
3445
  }
1967
3446
 
1968
- .saas-check-control, .saas-radio-control, .bento-check-control, .bento-radio-control, .max-check-control, .max-radio-control, .bau-check-control, .bau-radio-control, .tactile-check-control, .tactile-radio-control, .neo-check-control, .neo-radio-control, .retro-check-control, .retro-radio-control, .brutal-check-control, .brutal-radio-control, .cyber-check-control, .cyber-radio-control, .y2k-check-control, .y2k-radio-control, .rg-check-control, .rg-radio-control {
3447
+ :where(.luxe-check-control, .luxe-radio-control, .organic-check-control, .organic-radio-control, .utility-check-control, .utility-radio-control, .blueprint-check-control, .blueprint-radio-control, .deco-check-control, .deco-radio-control, .clay-check-control, .clay-radio-control, .terminal-check-control, .terminal-radio-control, .paper-check-control, .paper-radio-control, .noir-check-control, .noir-radio-control), :where([data-ui="neumorphism"]) :where(.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control) {
1969
3448
  inline-size: 1.5rem;
1970
3449
  block-size: 1.5rem;
1971
3450
  accent-color: var(--usk-native-primary);
1972
3451
  }
1973
3452
 
1974
- .saas-switch-track, .bento-switch-track, .max-switch-track, .bau-switch-track, .tactile-switch-track, .neo-switch-track, .retro-switch-track, .brutal-switch-track, .cyber-switch-track, .y2k-switch-track, .rg-switch-track {
3453
+ :where(.luxe-switch-track, .organic-switch-track, .utility-switch-track, .blueprint-switch-track, .deco-switch-track, .clay-switch-track, .terminal-switch-track, .paper-switch-track, .noir-switch-track), :where([data-ui="neumorphism"]) :where(.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track) {
1975
3454
  position: relative;
1976
3455
  display: inline-flex;
1977
3456
  align-items: center;
3457
+ flex: 0 0 auto;
1978
3458
  inline-size: 2.75rem;
1979
3459
  block-size: 1.5rem;
1980
3460
  padding: .18rem;
@@ -1983,7 +3463,7 @@
1983
3463
  border-radius: 999px;
1984
3464
  }
1985
3465
 
1986
- .saas-switch-thumb, .bento-switch-thumb, .max-switch-thumb, .bau-switch-thumb, .tactile-switch-thumb, .neo-switch-thumb, .retro-switch-thumb, .brutal-switch-thumb, .cyber-switch-thumb, .y2k-switch-thumb, .rg-switch-thumb {
3466
+ :where(.luxe-switch-thumb, .organic-switch-thumb, .utility-switch-thumb, .blueprint-switch-thumb, .deco-switch-thumb, .clay-switch-thumb, .terminal-switch-thumb, .paper-switch-thumb, .noir-switch-thumb), :where([data-ui="neumorphism"]) :where(.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb) {
1987
3467
  inline-size: 1rem;
1988
3468
  block-size: 1rem;
1989
3469
  background: var(--usk-native-thumb);
@@ -1992,35 +3472,9 @@
1992
3472
  transition: transform 160ms ease;
1993
3473
  }
1994
3474
 
1995
- .saas-switch:has(input:checked) .saas-switch-track,
1996
- .bento-switch:has(input:checked) .bento-switch-track,
1997
- .max-switch:has(input:checked) .max-switch-track,
1998
- .bau-switch:has(input:checked) .bau-switch-track,
1999
- .tactile-switch:has(input:checked) .tactile-switch-track,
2000
- .neo-switch:has(input:checked) .neo-switch-track,
2001
- .retro-switch:has(input:checked) .retro-switch-track,
2002
- .brutal-switch:has(input:checked) .brutal-switch-track,
2003
- .cyber-switch:has(input:checked) .cyber-switch-track,
2004
- .y2k-switch:has(input:checked) .y2k-switch-track,
2005
- .rg-switch:has(input:checked) .rg-switch-track {
2006
- background: var(--usk-native-track-fill);
2007
- }
2008
-
2009
- .saas-switch:has(input:checked) .saas-switch-thumb,
2010
- .bento-switch:has(input:checked) .bento-switch-thumb,
2011
- .max-switch:has(input:checked) .max-switch-thumb,
2012
- .bau-switch:has(input:checked) .bau-switch-thumb,
2013
- .tactile-switch:has(input:checked) .tactile-switch-thumb,
2014
- .neo-switch:has(input:checked) .neo-switch-thumb,
2015
- .retro-switch:has(input:checked) .retro-switch-thumb,
2016
- .brutal-switch:has(input:checked) .brutal-switch-thumb,
2017
- .cyber-switch:has(input:checked) .cyber-switch-thumb,
2018
- .y2k-switch:has(input:checked) .y2k-switch-thumb,
2019
- .rg-switch:has(input:checked) .rg-switch-thumb {
2020
- transform: translateX(1.25rem);
2021
- }
3475
+ :where(.luxe-switch:has(input:checked) .luxe-switch-track, .organic-switch:has(input:checked) .organic-switch-track, .utility-switch:has(input:checked) .utility-switch-track, .blueprint-switch:has(input:checked) .blueprint-switch-track, .deco-switch:has(input:checked) .deco-switch-track, .clay-switch:has(input:checked) .clay-switch-track, .terminal-switch:has(input:checked) .terminal-switch-track, .paper-switch:has(input:checked) .paper-switch-track, .noir-switch:has(input:checked) .noir-switch-track), :where([data-ui="neumorphism"]) :where(.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track) { background: var(--usk-native-track-fill); }
2022
3476
 
2023
- .saas-sr-only, .saas-visually-hidden, .bento-sr-only, .bento-visually-hidden, .max-sr-only, .max-visually-hidden, .bau-sr-only, .bau-visually-hidden, .tactile-sr-only, .tactile-visually-hidden, .neo-sr-only, .neo-visually-hidden, .retro-sr-only, .retro-visually-hidden, .brutal-sr-only, .brutal-visually-hidden, .cyber-sr-only, .cyber-visually-hidden, .y2k-sr-only, .y2k-visually-hidden, .rg-sr-only, .rg-visually-hidden {
3477
+ :where(.luxe-sr-only, .luxe-visually-hidden, .organic-sr-only, .organic-visually-hidden, .utility-sr-only, .utility-visually-hidden, .blueprint-sr-only, .blueprint-visually-hidden, .deco-sr-only, .deco-visually-hidden, .clay-sr-only, .clay-visually-hidden, .terminal-sr-only, .terminal-visually-hidden, .paper-sr-only, .paper-visually-hidden, .noir-sr-only, .noir-visually-hidden) {
2024
3478
  position: absolute !important;
2025
3479
  inline-size: 1px !important;
2026
3480
  block-size: 1px !important;
@@ -2032,7 +3486,7 @@
2032
3486
  border: 0 !important;
2033
3487
  }
2034
3488
 
2035
- .saas-skip-link, .bento-skip-link, .max-skip-link, .bau-skip-link, .tactile-skip-link, .neo-skip-link, .retro-skip-link, .brutal-skip-link, .cyber-skip-link, .y2k-skip-link, .rg-skip-link {
3489
+ :where(.luxe-skip-link, .organic-skip-link, .utility-skip-link, .blueprint-skip-link, .deco-skip-link, .clay-skip-link, .terminal-skip-link, .paper-skip-link, .noir-skip-link) {
2036
3490
  position: absolute;
2037
3491
  inset-block-start: .75rem;
2038
3492
  inset-inline-start: .75rem;
@@ -2044,10 +3498,9 @@
2044
3498
  transform: translateY(calc(-100% - 1rem));
2045
3499
  }
2046
3500
 
2047
- .saas-skip-link:focus-visible, .bento-skip-link:focus-visible, .max-skip-link:focus-visible, .bau-skip-link:focus-visible, .tactile-skip-link:focus-visible, .neo-skip-link:focus-visible, .retro-skip-link:focus-visible, .brutal-skip-link:focus-visible, .cyber-skip-link:focus-visible, .y2k-skip-link:focus-visible, .rg-skip-link:focus-visible {
2048
- transform: translateY(0);
2049
- }
3501
+ :where(.luxe-skip-link:focus-visible, .organic-skip-link:focus-visible, .utility-skip-link:focus-visible, .blueprint-skip-link:focus-visible, .deco-skip-link:focus-visible, .clay-skip-link:focus-visible, .terminal-skip-link:focus-visible, .paper-skip-link:focus-visible, .noir-skip-link:focus-visible) { transform: translateY(0); }
2050
3502
  }
3503
+ /* END GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
2051
3504
 
2052
3505
 
2053
3506
  /* styles/neumorphism.css (visual paint) */
@@ -2077,6 +3530,8 @@
2077
3530
  }
2078
3531
 
2079
3532
  [data-ui="neumorphism"][data-mode="light"] {
3533
+ --lightningcss-light: initial;
3534
+ --lightningcss-dark: ;
2080
3535
  color-scheme: light;
2081
3536
  --neo-panel-alpha: .98;
2082
3537
  --neo-panel-soft-alpha: .78;
@@ -2086,6 +3541,8 @@
2086
3541
  }
2087
3542
 
2088
3543
  [data-ui="neumorphism"][data-mode="dark"] {
3544
+ --lightningcss-light: ;
3545
+ --lightningcss-dark: initial;
2089
3546
  color-scheme: dark;
2090
3547
  --neo-panel-alpha: .92;
2091
3548
  --neo-panel-soft-alpha: .64;
@@ -2095,6 +3552,8 @@
2095
3552
  }
2096
3553
 
2097
3554
  [data-ui="neumorphism"][data-mode="contrast"] {
3555
+ --lightningcss-light: ;
3556
+ --lightningcss-dark: initial;
2098
3557
  color-scheme: dark;
2099
3558
  --neo-panel-alpha: 1;
2100
3559
  --neo-panel-soft-alpha: .92;
@@ -2165,7 +3624,7 @@
2165
3624
  --neo-fg: var(--neo-text);
2166
3625
  --neo-surface-fg: var(--neo-text);
2167
3626
  --neo-muted: var(--neo-text-muted);
2168
- --neo-border: rgb(var(--neo-border-rgb) / var(--neo-border-alpha));
3627
+ --neo-border: rgb(var(--neo-border-rgb) / max(var(--neo-border-alpha), var(--usk-border-min-alpha)));
2169
3628
  --neo-control-fg: var(--neo-text);
2170
3629
  --neo-primary: rgb(var(--neo-primary-rgb));
2171
3630
  --neo-primary-hover: rgb(var(--neo-primary-hover-rgb));
@@ -2195,6 +3654,12 @@
2195
3654
  --neo-spinner-accent: var(--neo-accent);
2196
3655
  }
2197
3656
 
3657
+ @supports (color: color-mix(in srgb,black,white)) {
3658
+ [data-ui="neumorphism"][data-theme][data-mode] {
3659
+ --neo-border: color-mix(in srgb, rgb(var(--neo-border-rgb) / max(var(--neo-border-alpha), var(--usk-border-min-alpha))), var(--neo-text) var(--usk-border-text-mix));
3660
+ }
3661
+ }
3662
+
2198
3663
  [data-ui="neumorphism"] {
2199
3664
  background: radial-gradient(circle at 50% -10%,#ffffff14,transparent 30rem),var(--neo-bg);
2200
3665
  color: var(--neo-text);
@@ -2214,7 +3679,7 @@
2214
3679
  background-size: var(--neo-theme-bg-size);
2215
3680
  }
2216
3681
 
2217
- .neo-title, .neo-heading, .neo-kicker, .neo-button, .neo-badge, .neo-nav-link {
3682
+ .neo-title, .neo-heading, .neo-kicker, .neo-button, .neo-badge, .neo-nav-link, :where([data-ui="neumorphism"]) .ui-button, :where([data-ui="neumorphism"]) .ui-badge, :where([data-ui="neumorphism"]) .ui-nav-link {
2218
3683
  font-family: var(--neo-font-heading);
2219
3684
  }
2220
3685
 
@@ -2260,7 +3725,7 @@
2260
3725
  height: 1px;
2261
3726
  }
2262
3727
 
2263
- .neo-surface, .neo-card, .neo-panel, .neo-toolbar, .neo-table-wrap {
3728
+ .neo-surface, .neo-card, .neo-panel, .neo-toolbar, .neo-table-wrap, :where([data-ui="neumorphism"]) .ui-card, :where([data-ui="neumorphism"]) .ui-toolbar, :where([data-ui="neumorphism"]) .ui-table-wrap {
2264
3729
  background: linear-gradient(180deg,#ffffff2e,#ffffff08),linear-gradient(135deg,rgb(var(--neo-primary-rgb)/.07),transparent 46%),var(--neo-surface);
2265
3730
  color: var(--neo-text);
2266
3731
  border: 1px solid var(--neo-border);
@@ -2270,11 +3735,11 @@
2270
3735
  position: relative;
2271
3736
  }
2272
3737
 
2273
- .neo-card, .neo-panel {
3738
+ .neo-card, .neo-panel, :where([data-ui="neumorphism"]) .ui-card {
2274
3739
  padding: var(--neo-space-6);
2275
3740
  }
2276
3741
 
2277
- .neo-toolbar {
3742
+ .neo-toolbar, :where([data-ui="neumorphism"]) .ui-toolbar {
2278
3743
  justify-content: space-between;
2279
3744
  align-items: center;
2280
3745
  gap: var(--neo-space-4);
@@ -2307,7 +3772,7 @@
2307
3772
  transform: translateY(-2px);
2308
3773
  }
2309
3774
 
2310
- .neo-button, .neo-icon-button {
3775
+ .neo-button, .neo-icon-button, :where([data-ui="neumorphism"]) .ui-button, :where([data-ui="neumorphism"]) .ui-icon-button {
2311
3776
  appearance: none;
2312
3777
  justify-content: center;
2313
3778
  align-items: center;
@@ -2321,7 +3786,6 @@
2321
3786
  font: inherit;
2322
3787
  cursor: pointer;
2323
3788
  -webkit-user-select: none;
2324
- -moz-user-select: none;
2325
3789
  user-select: none;
2326
3790
  transition: color var(--neo-transition-fast),background var(--neo-transition-fast),border-color var(--neo-transition-fast),box-shadow var(--neo-transition-fast),transform var(--neo-transition-fast);
2327
3791
  padding: .75rem 1.1rem;
@@ -2331,87 +3795,87 @@
2331
3795
  display: inline-flex;
2332
3796
  }
2333
3797
 
2334
- .neo-button:hover, .neo-icon-button:hover {
3798
+ .neo-button:hover, .neo-icon-button:hover, :where([data-ui="neumorphism"]) .ui-button:hover, :where([data-ui="neumorphism"]) .ui-icon-button:hover {
2335
3799
  border-color: var(--neo-primary);
2336
3800
  transform: translateY(-1px);
2337
3801
  }
2338
3802
 
2339
- .neo-button:active, .neo-icon-button:active, .neo-button[aria-pressed="true"], .neo-icon-button[aria-pressed="true"], .neo-button.is-active, .neo-icon-button.is-active {
3803
+ .neo-button:active, .neo-icon-button:active, .neo-button[aria-pressed="true"], .neo-icon-button[aria-pressed="true"], .neo-button.is-active, .neo-icon-button.is-active, :where([data-ui="neumorphism"]) .ui-button:active, :where([data-ui="neumorphism"]) .ui-icon-button:active, :where([data-ui="neumorphism"]) .ui-button[aria-pressed="true"], :where([data-ui="neumorphism"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="neumorphism"]) .ui-button.is-active, :where([data-ui="neumorphism"]) .ui-icon-button.is-active {
2340
3804
  transform: translateY(1px);
2341
3805
  box-shadow: inset 0 3px 10px #0000002e;
2342
3806
  }
2343
3807
 
2344
- .neo-button-primary {
3808
+ .neo-button-primary, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="primary"]) {
2345
3809
  background: var(--neo-primary);
2346
3810
  color: var(--neo-on-primary);
2347
3811
  border-color: var(--neo-primary);
2348
3812
  }
2349
3813
 
2350
- .neo-button-primary:hover {
3814
+ .neo-button-primary:hover, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="primary"]):hover {
2351
3815
  background: var(--neo-primary-hover);
2352
3816
  border-color: var(--neo-primary-hover);
2353
3817
  }
2354
3818
 
2355
- .neo-button-secondary {
3819
+ .neo-button-secondary, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="secondary"]) {
2356
3820
  background: var(--neo-secondary);
2357
3821
  color: var(--neo-on-secondary);
2358
3822
  border-color: var(--neo-secondary);
2359
3823
  }
2360
3824
 
2361
- .neo-button-secondary:hover {
3825
+ .neo-button-secondary:hover, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="secondary"]):hover {
2362
3826
  background: var(--neo-secondary-hover);
2363
3827
  border-color: var(--neo-secondary-hover);
2364
3828
  }
2365
3829
 
2366
- .neo-button-danger {
3830
+ .neo-button-danger, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="danger"]) {
2367
3831
  background: var(--neo-danger);
2368
3832
  color: var(--neo-on-danger);
2369
3833
  border-color: var(--neo-danger);
2370
3834
  }
2371
3835
 
2372
- .neo-button-ghost {
3836
+ .neo-button-ghost, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="ghost"]) {
2373
3837
  color: var(--neo-text);
2374
3838
  box-shadow: none;
2375
3839
  background: none;
2376
3840
  }
2377
3841
 
2378
- .neo-icon-button {
3842
+ .neo-icon-button, :where([data-ui="neumorphism"]) .ui-icon-button {
2379
3843
  border-radius: var(--neo-radius-pill);
2380
3844
  width: 2.75rem;
2381
3845
  padding: 0;
2382
3846
  }
2383
3847
 
2384
- .neo-button:disabled, .neo-icon-button:disabled, .neo-disabled {
3848
+ .neo-button:disabled, .neo-icon-button:disabled, .neo-disabled, :where([data-ui="neumorphism"]) .ui-button:disabled, :where([data-ui="neumorphism"]) .ui-icon-button:disabled {
2385
3849
  opacity: .55;
2386
3850
  cursor: not-allowed;
2387
3851
  transform: none;
2388
3852
  }
2389
3853
 
2390
- .neo-card, .neo-panel {
3854
+ .neo-card, .neo-panel, :where([data-ui="neumorphism"]) .ui-card {
2391
3855
  background: var(--neo-card-bg);
2392
3856
  }
2393
3857
 
2394
- .neo-toolbar, .neo-table-wrap, .neo-button:not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-ghost), .neo-icon-button {
3858
+ .neo-toolbar, .neo-table-wrap, .neo-button:not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-ghost), .neo-icon-button, :where([data-ui="neumorphism"]) .ui-toolbar, :where([data-ui="neumorphism"]) .ui-table-wrap, :where([data-ui="neumorphism"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="neumorphism"]) .ui-icon-button {
2395
3859
  background: var(--neo-control-bg);
2396
3860
  }
2397
3861
 
2398
- .neo-button, .neo-icon-button, .neo-badge, .neo-nav-link {
3862
+ .neo-button, .neo-icon-button, .neo-badge, .neo-nav-link, :where([data-ui="neumorphism"]) .ui-button, :where([data-ui="neumorphism"]) .ui-icon-button, :where([data-ui="neumorphism"]) .ui-badge, :where([data-ui="neumorphism"]) .ui-nav-link {
2399
3863
  font-family: var(--neo-font-control);
2400
3864
  }
2401
3865
 
2402
- .neo-field {
3866
+ .neo-field, :where([data-ui="neumorphism"]) .ui-field {
2403
3867
  gap: var(--neo-space-2);
2404
3868
  flex-direction: column;
2405
3869
  display: flex;
2406
3870
  }
2407
3871
 
2408
- .neo-label {
3872
+ .neo-label, :where([data-ui="neumorphism"]) .ui-label {
2409
3873
  color: var(--neo-text);
2410
3874
  font-size: .925rem;
2411
3875
  font-weight: 800;
2412
3876
  }
2413
3877
 
2414
- .neo-input, .neo-textarea, .neo-select {
3878
+ .neo-input, .neo-textarea, .neo-select, :where([data-ui="neumorphism"]) .ui-input, :where([data-ui="neumorphism"]) .ui-textarea, :where([data-ui="neumorphism"]) .ui-select {
2415
3879
  background: var(--neo-surface-soft);
2416
3880
  width: 100%;
2417
3881
  min-height: 2.875rem;
@@ -2424,32 +3888,32 @@
2424
3888
  padding: .75rem 1rem;
2425
3889
  }
2426
3890
 
2427
- .neo-textarea {
3891
+ .neo-textarea, :where([data-ui="neumorphism"]) .ui-textarea {
2428
3892
  resize: vertical;
2429
3893
  min-height: 8rem;
2430
3894
  }
2431
3895
 
2432
- .neo-input::placeholder, .neo-textarea::placeholder {
3896
+ .neo-input::placeholder, .neo-textarea::placeholder, :where([data-ui="neumorphism"]) .ui-input::placeholder, :where([data-ui="neumorphism"]) .ui-textarea::placeholder {
2433
3897
  color: var(--neo-text-muted);
2434
3898
  opacity: .82;
2435
3899
  }
2436
3900
 
2437
- .neo-input:hover, .neo-textarea:hover, .neo-select:hover {
3901
+ .neo-input:hover, .neo-textarea:hover, .neo-select:hover, :where([data-ui="neumorphism"]) .ui-input:hover, :where([data-ui="neumorphism"]) .ui-textarea:hover, :where([data-ui="neumorphism"]) .ui-select:hover {
2438
3902
  border-color: rgb(var(--neo-primary-rgb)/.58);
2439
3903
  }
2440
3904
 
2441
- .neo-input:focus, .neo-textarea:focus, .neo-select:focus {
3905
+ .neo-input:focus, .neo-textarea:focus, .neo-select:focus, :where([data-ui="neumorphism"]) .ui-input:focus, :where([data-ui="neumorphism"]) .ui-textarea:focus, :where([data-ui="neumorphism"]) .ui-select:focus {
2442
3906
  border-color: var(--neo-focus);
2443
3907
  box-shadow: var(--neo-focus-ring);
2444
3908
  }
2445
3909
 
2446
- .neo-help-text {
3910
+ .neo-help-text, :where([data-ui="neumorphism"]) .ui-help-text {
2447
3911
  color: var(--neo-text-muted);
2448
3912
  font-size: .875rem;
2449
3913
  line-height: 1.45;
2450
3914
  }
2451
3915
 
2452
- .neo-check, .neo-radio {
3916
+ .neo-check, .neo-radio, :where([data-ui="neumorphism"]) .ui-check, :where([data-ui="neumorphism"]) .ui-radio {
2453
3917
  align-items: center;
2454
3918
  gap: var(--neo-space-2);
2455
3919
  color: var(--neo-text);
@@ -2457,13 +3921,13 @@
2457
3921
  display: inline-flex;
2458
3922
  }
2459
3923
 
2460
- .neo-check input, .neo-radio input {
3924
+ .neo-check input, .neo-radio input, :where([data-ui="neumorphism"]) .ui-check input, :where([data-ui="neumorphism"]) .ui-radio input {
2461
3925
  opacity: 0;
2462
3926
  pointer-events: none;
2463
3927
  position: absolute;
2464
3928
  }
2465
3929
 
2466
- .neo-check-control, .neo-radio-control {
3930
+ .neo-check-control, .neo-radio-control, :where([data-ui="neumorphism"]) .ui-check-control, :where([data-ui="neumorphism"]) .ui-radio-control {
2467
3931
  background: var(--neo-surface-soft);
2468
3932
  border: 1px solid var(--neo-border);
2469
3933
  width: 1.35rem;
@@ -2473,28 +3937,28 @@
2473
3937
  display: inline-grid;
2474
3938
  }
2475
3939
 
2476
- .neo-check-control {
3940
+ .neo-check-control, :where([data-ui="neumorphism"]) .ui-check-control {
2477
3941
  border-radius: var(--neo-radius-xs);
2478
3942
  }
2479
3943
 
2480
- .neo-radio-control {
3944
+ .neo-radio-control, :where([data-ui="neumorphism"]) .ui-radio-control {
2481
3945
  border-radius: 50%;
2482
3946
  }
2483
3947
 
2484
- .neo-check input:checked + .neo-check-control, .neo-radio input:checked + .neo-radio-control {
3948
+ .neo-check input:checked + .neo-check-control, .neo-radio input:checked + .neo-radio-control, :where([data-ui="neumorphism"]) .ui-check input:checked+.ui-check-control, :where([data-ui="neumorphism"]) .ui-radio input:checked+.ui-radio-control {
2485
3949
  background: var(--neo-primary);
2486
3950
  border-color: var(--neo-primary);
2487
3951
  box-shadow: var(--neo-focus-ring);
2488
3952
  }
2489
3953
 
2490
- .neo-check input:checked + .neo-check-control:after {
3954
+ .neo-check input:checked + .neo-check-control:after, :where([data-ui="neumorphism"]) .ui-check input:checked+.ui-check-control:after {
2491
3955
  content: "✓";
2492
3956
  color: var(--neo-on-primary);
2493
3957
  font-size: .9rem;
2494
3958
  font-weight: 900;
2495
3959
  }
2496
3960
 
2497
- .neo-radio input:checked + .neo-radio-control:after {
3961
+ .neo-radio input:checked + .neo-radio-control:after, :where([data-ui="neumorphism"]) .ui-radio input:checked+.ui-radio-control:after {
2498
3962
  content: "";
2499
3963
  background: var(--neo-on-primary);
2500
3964
  border-radius: 50%;
@@ -2502,7 +3966,7 @@
2502
3966
  height: .55rem;
2503
3967
  }
2504
3968
 
2505
- .neo-switch {
3969
+ .neo-switch, :where([data-ui="neumorphism"]) .ui-switch {
2506
3970
  align-items: center;
2507
3971
  gap: var(--neo-space-3);
2508
3972
  color: var(--neo-text);
@@ -2510,13 +3974,13 @@
2510
3974
  display: inline-flex;
2511
3975
  }
2512
3976
 
2513
- .neo-switch input {
3977
+ .neo-switch input, :where([data-ui="neumorphism"]) .ui-switch input {
2514
3978
  opacity: 0;
2515
3979
  pointer-events: none;
2516
3980
  position: absolute;
2517
3981
  }
2518
3982
 
2519
- .neo-switch-track {
3983
+ .neo-switch-track, :where([data-ui="neumorphism"]) .ui-switch-track {
2520
3984
  background: var(--neo-surface-soft);
2521
3985
  border: 1px solid var(--neo-border);
2522
3986
  border-radius: var(--neo-radius-pill);
@@ -2526,7 +3990,7 @@
2526
3990
  position: relative;
2527
3991
  }
2528
3992
 
2529
- .neo-switch-thumb {
3993
+ .neo-switch-thumb, :where([data-ui="neumorphism"]) .ui-switch-thumb {
2530
3994
  background: var(--neo-surface-strong);
2531
3995
  border: 1px solid var(--neo-border);
2532
3996
  width: 1.34rem;
@@ -2539,17 +4003,17 @@
2539
4003
  left: .22rem;
2540
4004
  }
2541
4005
 
2542
- .neo-switch input:checked + .neo-switch-track {
4006
+ .neo-switch input:checked + .neo-switch-track, :where([data-ui="neumorphism"]) .ui-switch input:checked+.ui-switch-track {
2543
4007
  background: var(--neo-primary);
2544
4008
  border-color: var(--neo-primary);
2545
4009
  }
2546
4010
 
2547
- .neo-switch input:checked + .neo-switch-track .neo-switch-thumb {
4011
+ .neo-switch input:checked + .neo-switch-track .neo-switch-thumb, :where([data-ui="neumorphism"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
2548
4012
  background: var(--neo-on-primary);
2549
4013
  left: calc(100% - 1.56rem);
2550
4014
  }
2551
4015
 
2552
- .neo-badge {
4016
+ .neo-badge, :where([data-ui="neumorphism"]) .ui-badge {
2553
4017
  align-items: center;
2554
4018
  gap: var(--neo-space-1);
2555
4019
  background: var(--neo-surface-soft);
@@ -2564,37 +4028,37 @@
2564
4028
  display: inline-flex;
2565
4029
  }
2566
4030
 
2567
- .neo-badge-primary {
4031
+ .neo-badge-primary, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="primary"]) {
2568
4032
  background: var(--neo-primary);
2569
4033
  color: var(--neo-on-primary);
2570
4034
  border-color: var(--neo-primary);
2571
4035
  }
2572
4036
 
2573
- .neo-badge-secondary {
4037
+ .neo-badge-secondary, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="secondary"]) {
2574
4038
  background: var(--neo-secondary);
2575
4039
  color: var(--neo-on-secondary);
2576
4040
  border-color: var(--neo-secondary);
2577
4041
  }
2578
4042
 
2579
- .neo-badge-success {
4043
+ .neo-badge-success, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="success"]) {
2580
4044
  background: var(--neo-success);
2581
4045
  color: var(--neo-on-success);
2582
4046
  border-color: var(--neo-success);
2583
4047
  }
2584
4048
 
2585
- .neo-badge-warning {
4049
+ .neo-badge-warning, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="warning"]) {
2586
4050
  background: var(--neo-warning);
2587
4051
  color: var(--neo-on-warning);
2588
4052
  border-color: var(--neo-warning);
2589
4053
  }
2590
4054
 
2591
- .neo-badge-danger {
4055
+ .neo-badge-danger, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="danger"]) {
2592
4056
  background: var(--neo-danger);
2593
4057
  color: var(--neo-on-danger);
2594
4058
  border-color: var(--neo-danger);
2595
4059
  }
2596
4060
 
2597
- .neo-nav {
4061
+ .neo-nav, :where([data-ui="neumorphism"]) .ui-nav {
2598
4062
  align-items: center;
2599
4063
  gap: var(--neo-space-2);
2600
4064
  padding: var(--neo-space-2);
@@ -2606,7 +4070,7 @@
2606
4070
  display: flex;
2607
4071
  }
2608
4072
 
2609
- .neo-nav-link {
4073
+ .neo-nav-link, :where([data-ui="neumorphism"]) .ui-nav-link {
2610
4074
  min-height: 2.5rem;
2611
4075
  color: var(--neo-text-muted);
2612
4076
  border-radius: var(--neo-radius-pill);
@@ -2619,12 +4083,12 @@
2619
4083
  display: inline-flex;
2620
4084
  }
2621
4085
 
2622
- .neo-nav-link:hover {
4086
+ .neo-nav-link:hover, :where([data-ui="neumorphism"]) .ui-nav-link:hover {
2623
4087
  color: var(--neo-text);
2624
4088
  background: var(--neo-surface-soft);
2625
4089
  }
2626
4090
 
2627
- .neo-nav-link[aria-current="page"], .neo-nav-link.is-active {
4091
+ .neo-nav-link[aria-current="page"], .neo-nav-link.is-active, :where([data-ui="neumorphism"]) .ui-nav-link[aria-current="page"], :where([data-ui="neumorphism"]) .ui-nav-link.is-active {
2628
4092
  color: var(--neo-on-primary);
2629
4093
  background: var(--neo-primary);
2630
4094
  }
@@ -2654,7 +4118,7 @@
2654
4118
  box-shadow: inset .12rem .12rem .24rem #0000001f;
2655
4119
  }
2656
4120
 
2657
- .neo-progress {
4121
+ .neo-progress, :where([data-ui="neumorphism"]) .ui-progress {
2658
4122
  background: var(--neo-surface-soft);
2659
4123
  border: 1px solid var(--neo-border);
2660
4124
  border-radius: var(--neo-radius-pill);
@@ -2663,14 +4127,14 @@
2663
4127
  overflow: hidden;
2664
4128
  }
2665
4129
 
2666
- .neo-progress-bar {
4130
+ .neo-progress-bar, :where([data-ui="neumorphism"]) .ui-progress-bar {
2667
4131
  height: 100%;
2668
4132
  width: var(--neo-progress-value, 50%);
2669
4133
  background: linear-gradient(90deg,var(--neo-primary),var(--neo-accent));
2670
4134
  border-radius: inherit;
2671
4135
  }
2672
4136
 
2673
- .neo-alert {
4137
+ .neo-alert, :where([data-ui="neumorphism"]) .ui-alert {
2674
4138
  gap: var(--neo-space-2);
2675
4139
  padding: var(--neo-space-4);
2676
4140
  background: var(--neo-surface);
@@ -2681,45 +4145,45 @@
2681
4145
  display: grid;
2682
4146
  }
2683
4147
 
2684
- .neo-alert-success {
4148
+ .neo-alert-success, :where([data-ui="neumorphism"]) .ui-alert:where([data-ui-variant="success"]) {
2685
4149
  border-left-color: var(--neo-success);
2686
4150
  }
2687
4151
 
2688
- .neo-alert-warning {
4152
+ .neo-alert-warning, :where([data-ui="neumorphism"]) .ui-alert:where([data-ui-variant="warning"]) {
2689
4153
  border-left-color: var(--neo-warning);
2690
4154
  }
2691
4155
 
2692
- .neo-alert-danger {
4156
+ .neo-alert-danger, :where([data-ui="neumorphism"]) .ui-alert:where([data-ui-variant="danger"]) {
2693
4157
  border-left-color: var(--neo-danger);
2694
4158
  }
2695
4159
 
2696
- .neo-alert-title {
4160
+ .neo-alert-title, :where([data-ui="neumorphism"]) .ui-alert-title {
2697
4161
  margin: 0;
2698
4162
  font-weight: 900;
2699
4163
  }
2700
4164
 
2701
- .neo-alert-body {
4165
+ .neo-alert-body, :where([data-ui="neumorphism"]) .ui-alert-body {
2702
4166
  color: var(--neo-text-muted);
2703
4167
  margin: 0;
2704
4168
  line-height: 1.55;
2705
4169
  }
2706
4170
 
2707
- .neo-table-wrap {
4171
+ .neo-table-wrap, :where([data-ui="neumorphism"]) .ui-table-wrap {
2708
4172
  overflow: auto;
2709
4173
  }
2710
4174
 
2711
- .neo-table {
4175
+ .neo-table, :where([data-ui="neumorphism"]) .ui-table {
2712
4176
  border-collapse: collapse;
2713
4177
  width: 100%;
2714
4178
  }
2715
4179
 
2716
- .neo-table th, .neo-table td {
4180
+ .neo-table th, .neo-table td, :where([data-ui="neumorphism"]) .ui-table th, :where([data-ui="neumorphism"]) .ui-table td {
2717
4181
  text-align: left;
2718
4182
  border-bottom: 1px solid var(--neo-border);
2719
4183
  padding: .95rem 1rem;
2720
4184
  }
2721
4185
 
2722
- .neo-table th {
4186
+ .neo-table th, :where([data-ui="neumorphism"]) .ui-table th {
2723
4187
  color: var(--neo-text);
2724
4188
  text-transform: uppercase;
2725
4189
  letter-spacing: .08em;
@@ -2728,11 +4192,11 @@
2728
4192
  font-weight: 900;
2729
4193
  }
2730
4194
 
2731
- .neo-table td {
4195
+ .neo-table td, :where([data-ui="neumorphism"]) .ui-table td {
2732
4196
  color: var(--neo-text-muted);
2733
4197
  }
2734
4198
 
2735
- .neo-table tr:hover td {
4199
+ .neo-table tr:hover td, :where([data-ui="neumorphism"]) .ui-table tr:hover td {
2736
4200
  background: rgb(var(--neo-primary-rgb)/.045);
2737
4201
  }
2738
4202
 
@@ -2838,7 +4302,7 @@
2838
4302
  background: var(--neo-bg);
2839
4303
  }
2840
4304
 
2841
- .neo-surface, .neo-card, .neo-panel, .neo-toolbar, .neo-table-wrap {
4305
+ .neo-surface, .neo-card, .neo-panel, .neo-toolbar, .neo-table-wrap, :where([data-ui="neumorphism"]) .ui-card, :where([data-ui="neumorphism"]) .ui-toolbar, :where([data-ui="neumorphism"]) .ui-table-wrap {
2842
4306
  border-color: rgb(var(--neo-border-rgb)/.14);
2843
4307
  box-shadow: 10px 10px 22px var(--neo-nm-dark),-10px -10px 22px var(--neo-nm-light);
2844
4308
  }
@@ -2847,15 +4311,15 @@
2847
4311
  box-shadow: 16px 16px 32px var(--neo-nm-dark),-16px -16px 32px var(--neo-nm-light);
2848
4312
  }
2849
4313
 
2850
- .neo-well, .neo-inset, .neo-input, .neo-textarea, .neo-select, .neo-progress {
4314
+ .neo-well, .neo-inset, .neo-input, .neo-textarea, .neo-select, .neo-progress, :where([data-ui="neumorphism"]) .ui-input, :where([data-ui="neumorphism"]) .ui-textarea, :where([data-ui="neumorphism"]) .ui-select, :where([data-ui="neumorphism"]) .ui-progress {
2851
4315
  box-shadow: inset 5px 5px 11px var(--neo-nm-dark),inset -5px -5px 11px var(--neo-nm-light);
2852
4316
  }
2853
4317
 
2854
- .neo-button, .neo-icon-button, .neo-badge, .neo-nav {
4318
+ .neo-button, .neo-icon-button, .neo-badge, .neo-nav, :where([data-ui="neumorphism"]) .ui-button, :where([data-ui="neumorphism"]) .ui-icon-button, :where([data-ui="neumorphism"]) .ui-badge, :where([data-ui="neumorphism"]) .ui-nav {
2855
4319
  box-shadow: 5px 5px 11px var(--neo-nm-dark),-5px -5px 11px var(--neo-nm-light);
2856
4320
  }
2857
4321
 
2858
- .neo-button:active, .neo-icon-button:active, .neo-button.is-active, .neo-icon-button.is-active, .neo-nav-link.is-active {
4322
+ .neo-button:active, .neo-icon-button:active, .neo-button.is-active, .neo-icon-button.is-active, .neo-nav-link.is-active, :where([data-ui="neumorphism"]) .ui-button:active, :where([data-ui="neumorphism"]) .ui-icon-button:active, :where([data-ui="neumorphism"]) .ui-button.is-active, :where([data-ui="neumorphism"]) .ui-icon-button.is-active, :where([data-ui="neumorphism"]) .ui-nav-link.is-active {
2859
4323
  box-shadow: inset 4px 4px 9px var(--neo-nm-dark),inset -4px -4px 9px var(--neo-nm-light);
2860
4324
  }
2861
4325
 
@@ -2885,12 +4349,12 @@
2885
4349
  inline-size: 3rem;
2886
4350
  }
2887
4351
 
2888
- .neo-button[aria-busy="true"], .neo-icon-button[aria-busy="true"], [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
4352
+ .neo-button[aria-busy="true"], .neo-icon-button[aria-busy="true"], [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]), :where([data-ui="neumorphism"]) .ui-button[aria-busy="true"], :where([data-ui="neumorphism"]) .ui-icon-button[aria-busy="true"] {
2889
4353
  cursor: progress;
2890
4354
  gap: .55rem;
2891
4355
  }
2892
4356
 
2893
- .neo-button[aria-busy="true"]:after, .neo-icon-button[aria-busy="true"]:after, [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
4357
+ .neo-button[aria-busy="true"]:after, .neo-icon-button[aria-busy="true"]:after, [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="neumorphism"]) .ui-button[aria-busy="true"]:after, :where([data-ui="neumorphism"]) .ui-icon-button[aria-busy="true"]:after {
2894
4358
  content: "";
2895
4359
  border: .16em solid rgb(var(--neo-primary-text-rgb)/.42);
2896
4360
  border-block-start-color: currentColor;
@@ -2907,6 +4371,285 @@
2907
4371
  }
2908
4372
  }
2909
4373
 
4374
+ .neo-card-media {
4375
+ aspect-ratio: 16 / 9;
4376
+ object-fit: cover;
4377
+ border: 1px solid rgb(var(--neo-border-rgb)/.72);
4378
+ border-radius: var(--neo-radius-lg);
4379
+ inline-size: 100%;
4380
+ display: block;
4381
+ }
4382
+
4383
+ .neo-card-service {
4384
+ gap: var(--neo-space-3);
4385
+ text-align: center;
4386
+ align-content: start;
4387
+ display: grid;
4388
+ position: relative;
4389
+ overflow: visible;
4390
+ }
4391
+
4392
+ .neo-card-service > .neo-icon-medallion {
4393
+ z-index: 2;
4394
+ justify-self: center;
4395
+ margin-block-start: -2.15rem;
4396
+ position: relative;
4397
+ }
4398
+
4399
+ .neo-card-service > .neo-card-media + .neo-icon-medallion {
4400
+ margin-block-start: -2.15rem;
4401
+ }
4402
+
4403
+ .neo-card-feature {
4404
+ gap: var(--neo-space-4);
4405
+ grid-template-columns: auto minmax(0, 1fr);
4406
+ align-items: start;
4407
+ display: grid;
4408
+ }
4409
+
4410
+ .neo-card-accent-edge {
4411
+ border-inline-start: .35rem solid var(--neo-primary);
4412
+ }
4413
+
4414
+ .neo-icon-medallion {
4415
+ background: var(--neo-primary);
4416
+ block-size: 3.75rem;
4417
+ inline-size: 3.75rem;
4418
+ color: var(--neo-on-primary);
4419
+ border: 2px solid rgb(var(--neo-border-rgb)/.82);
4420
+ border-radius: 50%;
4421
+ flex: none;
4422
+ place-items: center;
4423
+ padding: .7rem;
4424
+ line-height: 1;
4425
+ display: inline-grid;
4426
+ }
4427
+
4428
+ .neo-icon-medallion > :where(svg, img) {
4429
+ object-fit: contain;
4430
+ block-size: 100%;
4431
+ inline-size: 100%;
4432
+ }
4433
+
4434
+ .neo-button.neo-button-cut, .neo-button-cut, :where([data-ui="neumorphism"]) .ui-button.neo-button-cut {
4435
+ clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
4436
+ border-radius: 0;
4437
+ }
4438
+
4439
+ .neo-button.neo-button-cut:focus-visible, .neo-button-cut:focus-visible, :where([data-ui="neumorphism"]) .ui-button.neo-button-cut:focus-visible {
4440
+ outline-offset: -3px;
4441
+ }
4442
+
4443
+ .neo-button.neo-button-outline-heavy, .neo-button-outline-heavy, :where([data-ui="neumorphism"]) .ui-button.neo-button-outline-heavy {
4444
+ color: var(--neo-primary);
4445
+ border-style: solid;
4446
+ border-width: 2px;
4447
+ border-color: var(--neo-primary);
4448
+ box-shadow: none;
4449
+ background: none;
4450
+ }
4451
+
4452
+ .neo-button.neo-button-outline-heavy:hover, .neo-button-outline-heavy:hover, :where([data-ui="neumorphism"]) .ui-button.neo-button-outline-heavy:hover {
4453
+ background: var(--neo-primary);
4454
+ color: var(--neo-on-primary);
4455
+ border-color: var(--neo-primary-hover);
4456
+ }
4457
+
4458
+ .neo-badge-seal {
4459
+ aspect-ratio: 1;
4460
+ background: var(--neo-surface-strong);
4461
+ inline-size: 5rem;
4462
+ min-inline-size: 5rem;
4463
+ color: var(--neo-text);
4464
+ border: 2px solid var(--neo-primary);
4465
+ text-align: center;
4466
+ font-family: var(--neo-font-heading);
4467
+ letter-spacing: .04em;
4468
+ border-radius: 50%;
4469
+ align-content: center;
4470
+ place-items: center;
4471
+ padding: .65rem;
4472
+ font-size: .72rem;
4473
+ font-weight: 900;
4474
+ line-height: 1.05;
4475
+ display: inline-grid;
4476
+ }
4477
+
4478
+ .neo-feature-strip {
4479
+ background: var(--neo-card-bg);
4480
+ color: var(--neo-text);
4481
+ border: 1px solid var(--neo-border);
4482
+ border-radius: var(--neo-radius-lg);
4483
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4484
+ display: grid;
4485
+ overflow: hidden;
4486
+ }
4487
+
4488
+ .neo-feature-item {
4489
+ align-items: center;
4490
+ gap: var(--neo-space-3);
4491
+ min-inline-size: 0;
4492
+ padding: var(--neo-space-4);
4493
+ border-inline-end: 1px solid rgb(var(--neo-border-rgb)/.62);
4494
+ grid-template-columns: auto minmax(0, 1fr);
4495
+ display: grid;
4496
+ }
4497
+
4498
+ .neo-feature-item:last-child {
4499
+ border-inline-end: 0;
4500
+ }
4501
+
4502
+ .neo-feature-item > :where(p, small) {
4503
+ color: var(--neo-text-muted);
4504
+ margin: 0;
4505
+ }
4506
+
4507
+ .neo-callout-bar {
4508
+ align-items: center;
4509
+ gap: var(--neo-space-4);
4510
+ padding: var(--neo-space-4) var(--neo-space-5);
4511
+ background: var(--neo-card-bg);
4512
+ color: var(--neo-text);
4513
+ border: 1px solid var(--neo-border);
4514
+ border-radius: var(--neo-radius-lg);
4515
+ grid-template-columns: auto minmax(0, 1fr) auto;
4516
+ display: grid;
4517
+ }
4518
+
4519
+ .neo-callout-bar > :where(p, div) {
4520
+ min-inline-size: 0;
4521
+ }
4522
+
4523
+ .neo-callout-bar > :where(.neo-button, a, button):last-child, :where([data-ui="neumorphism"]) .neo-callout-bar>:where(.ui-button,a,button):last-child {
4524
+ justify-self: end;
4525
+ }
4526
+
4527
+ .neo-eyebrow {
4528
+ color: var(--neo-primary);
4529
+ font-family: var(--neo-font-heading);
4530
+ letter-spacing: .14em;
4531
+ text-transform: uppercase;
4532
+ margin: 0;
4533
+ font-size: .76rem;
4534
+ font-weight: 900;
4535
+ line-height: 1.2;
4536
+ }
4537
+
4538
+ .neo-media-scrim {
4539
+ isolation: isolate;
4540
+ background: var(--neo-surface-soft);
4541
+ border: 1px solid var(--neo-border);
4542
+ border-radius: var(--neo-radius-lg);
4543
+ min-block-size: 12rem;
4544
+ position: relative;
4545
+ overflow: hidden;
4546
+ }
4547
+
4548
+ .neo-media-scrim > :where(img, picture, video) {
4549
+ block-size: 100%;
4550
+ inline-size: 100%;
4551
+ min-block-size: inherit;
4552
+ object-fit: cover;
4553
+ display: block;
4554
+ }
4555
+
4556
+ .neo-media-scrim > :where(figcaption, [data-media-caption]) {
4557
+ z-index: 1;
4558
+ color: #fff;
4559
+ background: linear-gradient(to top, #000000e6, #00000094 56%, #0000);
4560
+ padding: clamp(1rem, 4vw, 2rem);
4561
+ position: absolute;
4562
+ inset-block-end: 0;
4563
+ inset-inline: 0;
4564
+ }
4565
+
4566
+ .neo-media-scrim > :where(figcaption, [data-media-caption]) * {
4567
+ color: inherit;
4568
+ }
4569
+
4570
+ @media (max-width: 42rem) {
4571
+ .neo-callout-bar {
4572
+ grid-template-columns: 1fr;
4573
+ align-items: start;
4574
+ }
4575
+
4576
+ .neo-callout-bar > :where(.neo-button, a, button):last-child, :where([data-ui="neumorphism"]) .neo-callout-bar>:where(.ui-button,a,button):last-child {
4577
+ justify-self: stretch;
4578
+ }
4579
+
4580
+ .neo-feature-item {
4581
+ border-inline-end: 0;
4582
+ border-block-end: 1px solid rgb(var(--neo-border-rgb)/.62);
4583
+ }
4584
+
4585
+ .neo-feature-item:last-child {
4586
+ border-block-end: 0;
4587
+ }
4588
+ }
4589
+
4590
+ .neo-card-service, .neo-card-feature, .neo-feature-strip, .neo-callout-bar {
4591
+ border-color: #0000;
4592
+ box-shadow: .65rem .65rem 1.35rem #00000029, -.55rem -.55rem 1.25rem #ffffff14;
4593
+ }
4594
+
4595
+ .neo-icon-medallion, .neo-badge-seal {
4596
+ border-color: #0000;
4597
+ box-shadow: .38rem .38rem .8rem #0000002e, -.3rem -.3rem .7rem #ffffff1a;
4598
+ }
4599
+
4600
+ .neo-button-outline-heavy {
4601
+ border-color: var(--neo-primary);
4602
+ box-shadow: inset .18rem .18rem .45rem #0000001f;
4603
+ }
4604
+
4605
+ .neo-button.neo-button-cut, .neo-button-cut, :where([data-ui="neumorphism"]) .ui-button.neo-button-cut {
4606
+ border-radius: var(--neo-radius-pill);
4607
+ min-inline-size: 6rem;
4608
+ max-inline-size: 100%;
4609
+ clip-path: inset(0 round var(--neo-radius-pill));
4610
+ justify-content: center;
4611
+ justify-self: center;
4612
+ }
4613
+
4614
+ .neo-button.neo-button-outline-heavy, .neo-button-outline-heavy, :where([data-ui="neumorphism"]) .ui-button.neo-button-outline-heavy {
4615
+ border-radius: var(--neo-radius-pill);
4616
+ clip-path: inset(.08rem round var(--neo-radius-pill));
4617
+ box-shadow: -.28rem -.28rem .65rem rgb(var(--neo-surface-strong-rgb)/.72),.32rem .32rem .72rem rgb(var(--neo-text-rgb)/.16);
4618
+ border-width: 1px;
4619
+ }
4620
+
4621
+ .neo-card-service, .neo-media-scrim, .neo-feature-strip, .neo-callout-bar, .neo-well {
4622
+ border: 1px solid rgb(var(--neo-border-rgb)/.36);
4623
+ border-radius: var(--neo-radius-xl);
4624
+ box-shadow: -.55rem -.55rem 1.15rem rgb(var(--neo-surface-strong-rgb)/.74),.58rem .58rem 1.2rem rgb(var(--neo-text-rgb)/.14);
4625
+ }
4626
+
4627
+ .neo-well {
4628
+ box-shadow: inset .3rem .3rem .7rem rgb(var(--neo-text-rgb)/.12),inset -.3rem -.3rem .7rem rgb(var(--neo-surface-strong-rgb)/.68);
4629
+ }
4630
+
4631
+ [data-ui="neumorphism"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4632
+ border: 1px solid rgb(var(--neo-border-rgb)/.42);
4633
+ border-radius: var(--neo-radius-pill);
4634
+ box-shadow: -.28rem -.28rem .65rem rgb(var(--neo-surface-strong-rgb)/.72),.32rem .32rem .72rem rgb(var(--neo-text-rgb)/.16);
4635
+ }
4636
+
4637
+ [data-ui="neumorphism"][data-theme][data-mode] :where(dialog) {
4638
+ border: 1px solid rgb(var(--neo-border-rgb)/.38);
4639
+ border-radius: var(--neo-radius-xl);
4640
+ box-shadow: -.65rem -.65rem 1.3rem rgb(var(--neo-surface-strong-rgb)/.72),.72rem .72rem 1.45rem rgb(var(--neo-text-rgb)/.2);
4641
+ }
4642
+
4643
+ .neo-button[aria-busy="true"]:after, .neo-icon-button[aria-busy="true"]:after, [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="neumorphism"]) .ui-button[aria-busy="true"]:after, :where([data-ui="neumorphism"]) .ui-icon-button[aria-busy="true"]:after {
4644
+ border: .12em solid #0000;
4645
+ box-shadow: -.09em -.09em .18em #ffffff61,.09em .09em .2em #00000038,inset 0 0 0 .18em rgb(var(--neo-surface-rgb)/.6);
4646
+ clip-path: circle(50%);
4647
+ background: conic-gradient(currentColor, #0000 42%, currentColor);
4648
+ border-block-start-color: currentColor;
4649
+ border-radius: 50%;
4650
+ animation: 1.04s linear infinite neo-spin;
4651
+ }
4652
+
2910
4653
  @media (prefers-reduced-motion: reduce) {
2911
4654
  [data-ui="neumorphism"] *, [data-ui="neumorphism"] :before, [data-ui="neumorphism"] :after {
2912
4655
  scroll-behavior: auto !important;
@@ -2924,8 +4667,10 @@
2924
4667
  }
2925
4668
 
2926
4669
  @media (forced-colors: active) {
2927
- [data-ui="neumorphism"] * {
2928
- forced-color-adjust: auto;
4670
+ @supports (forced-color-adjust: auto) {
4671
+ [data-ui="neumorphism"] * {
4672
+ forced-color-adjust: auto;
4673
+ }
2929
4674
  }
2930
4675
 
2931
4676
  [data-ui="neumorphism"] :where(:focus-visible) {