ui-style-kit-css 2.2.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 (63) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/README.md +100 -31
  3. package/STYLE-MAP.md +19 -0
  4. package/dist/ui-style-kit.css +18417 -1704
  5. package/dist/ui-style-kit.min.css +2 -2
  6. package/dist/ui-style-kit.visual.css +17709 -1446
  7. package/dist/ui-style-kit.visual.min.css +2 -2
  8. package/dist/ui-style-kit.with-bridge.css +18425 -1706
  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 +1809 -78
  12. package/dist/visual/bento.css +1825 -97
  13. package/dist/visual/brutalism.css +1774 -35
  14. package/dist/visual/clay.css +4789 -0
  15. package/dist/visual/cyberpunk.css +1765 -35
  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 +1771 -37
  20. package/dist/visual/minimal-saas.css +1801 -78
  21. package/dist/visual/neo-noir.css +4790 -0
  22. package/dist/visual/neumorphism.css +1807 -78
  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 +1786 -36
  26. package/dist/visual/retrofuturism.css +1759 -36
  27. package/dist/visual/tactile.css +1760 -36
  28. package/dist/visual/technical-blueprint.css +4791 -0
  29. package/dist/visual/y2k.css +1767 -35
  30. package/docs/ECOSYSTEM.md +8 -4
  31. package/docs/PUBLISHING.md +14 -10
  32. package/docs/STYLE-GUIDE.md +53 -13
  33. package/docs/TOKENS.md +10 -1
  34. package/docs/superpowers/plans/2026-08-29-preset-identity-system-refinement.md +649 -0
  35. package/docs/superpowers/specs/2026-08-29-preset-identity-system-refinement-design.md +212 -0
  36. package/manifest.json +160 -2
  37. package/package.json +63 -6
  38. package/styles/art-deco.css +683 -0
  39. package/styles/bauhaus.css +237 -3
  40. package/styles/bento.css +266 -7
  41. package/styles/brutalism.css +235 -3
  42. package/styles/clay.css +692 -0
  43. package/styles/components.css +608 -14
  44. package/styles/content-overflow.css +423 -4
  45. package/styles/cyberpunk.css +234 -3
  46. package/styles/data-terminal.css +691 -0
  47. package/styles/editorial-luxe.css +687 -0
  48. package/styles/industrial-utility.css +690 -0
  49. package/styles/interactive-surface-bridge.css +11 -5
  50. package/styles/interactive-surface-theme.css +11 -3
  51. package/styles/maximalist.css +238 -4
  52. package/styles/minimal-saas.css +234 -3
  53. package/styles/native-elements.css +64 -12
  54. package/styles/neo-noir.css +690 -0
  55. package/styles/neumorphism.css +234 -3
  56. package/styles/organic-modern.css +683 -0
  57. package/styles/paper-editorial.css +688 -0
  58. package/styles/retro-glass.css +242 -3
  59. package/styles/retrofuturism.css +233 -3
  60. package/styles/tactile.css +235 -3
  61. package/styles/technical-blueprint.css +686 -0
  62. package/styles/theme-colors.css +796 -5
  63. package/styles/y2k.css +237 -3
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * UI Style Kit CSS v2.2.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);
@@ -869,7 +1660,10 @@
869
1660
  font-family: var(--usk-native-font-heading);
870
1661
  line-height: 1.15;
871
1662
  margin: 0 0 .65em;
872
- 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; }
873
1667
  }
874
1668
 
875
1669
  [data-ui][data-theme][data-mode] :where(hgroup) {
@@ -917,7 +1711,7 @@
917
1711
  padding: .15em .35em;
918
1712
  color: var(--usk-native-text);
919
1713
  background: var(--usk-native-surface-soft);
920
- 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);
921
1715
  border-radius: var(--usk-native-radius-sm);
922
1716
  font-family: var(--usk-native-font-mono);
923
1717
  font-size: .92em;
@@ -950,7 +1744,7 @@
950
1744
  [data-ui][data-theme][data-mode] :where(mark) {
951
1745
  padding-inline: .15em;
952
1746
  color: var(--usk-native-text);
953
- background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
1747
+ background: rgb(var(--usk-warning-rgb) / .32);
954
1748
  border-radius: .2em;
955
1749
  }
956
1750
 
@@ -989,7 +1783,7 @@
989
1783
  min-inline-size: 0;
990
1784
  margin: 0 0 1rem;
991
1785
  padding: var(--usk-native-panel-padding);
992
- background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
1786
+ background: var(--usk-native-card-bg);
993
1787
  border: var(--usk-native-border-width) solid var(--usk-native-border);
994
1788
  border-radius: var(--usk-native-radius);
995
1789
  }
@@ -1017,7 +1811,7 @@
1017
1811
  align-items: center;
1018
1812
  }
1019
1813
 
1020
- [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) {
1021
1815
  width: 100%;
1022
1816
  min-block-size: var(--usk-native-control-min-block-size);
1023
1817
  padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
@@ -1045,9 +1839,16 @@
1045
1839
 
1046
1840
  [data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
1047
1841
 
1048
- [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;
1049
1846
  min-block-size: var(--usk-native-control-min-block-size);
1050
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])) {
1051
1852
  color: var(--usk-native-on-primary);
1052
1853
  background: var(--usk-native-primary);
1053
1854
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
@@ -1057,6 +1858,18 @@
1057
1858
  cursor: pointer;
1058
1859
  }
1059
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
+
1060
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) {
1061
1874
  background: var(--usk-native-primary-hover);
1062
1875
  border-color: var(--usk-native-primary-hover);
@@ -1172,7 +1985,7 @@
1172
1985
  cursor: not-allowed;
1173
1986
  }
1174
1987
 
1175
- [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) {
1176
1989
  background: var(--usk-native-surface-soft);
1177
1990
  }
1178
1991
 
@@ -1198,7 +2011,7 @@
1198
2011
 
1199
2012
  [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
1200
2013
  color: var(--usk-native-text-muted);
1201
- background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2014
+ background: var(--usk-native-surface-soft);
1202
2015
  border-color: var(--usk-native-border);
1203
2016
  box-shadow: none;
1204
2017
  opacity: .55;
@@ -1230,7 +2043,7 @@
1230
2043
 
1231
2044
  [data-ui][data-theme][data-mode] :where(th) {
1232
2045
  color: var(--usk-native-text);
1233
- background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2046
+ background: var(--usk-native-surface-soft);
1234
2047
  }
1235
2048
 
1236
2049
  [data-ui][data-theme][data-mode] :where(td) { color: var(--usk-native-text-muted); }
@@ -1260,6 +2073,8 @@
1260
2073
  box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
1261
2074
  }
1262
2075
 
2076
+ [data-ui][data-theme][data-mode] :where(dialog p) { color: inherit; }
2077
+
1263
2078
  [data-ui][data-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
1264
2079
 
1265
2080
  [data-ui][data-theme][data-mode] :where(progress, meter) {
@@ -1373,6 +2188,32 @@
1373
2188
  [data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
1374
2189
  [data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
1375
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
+
1376
2217
  @media (prefers-reduced-motion: reduce) {
1377
2218
  [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
1378
2219
  [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
@@ -1381,8 +2222,10 @@
1381
2222
  }
1382
2223
 
1383
2224
  @media (forced-colors: active) {
1384
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
1385
- 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
+ }
1386
2229
  }
1387
2230
 
1388
2231
  [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
@@ -1991,6 +2834,7 @@
1991
2834
  position: relative;
1992
2835
  display: inline-flex;
1993
2836
  align-items: center;
2837
+ flex: 0 0 auto;
1994
2838
  inline-size: 2.75rem;
1995
2839
  block-size: 1.5rem;
1996
2840
  padding: .18rem;
@@ -2022,20 +2866,6 @@
2022
2866
  background: var(--usk-native-track-fill);
2023
2867
  }
2024
2868
 
2025
- .saas-switch:has(input:checked) .saas-switch-thumb,
2026
- .bento-switch:has(input:checked) .bento-switch-thumb,
2027
- .max-switch:has(input:checked) .max-switch-thumb,
2028
- .bau-switch:has(input:checked) .bau-switch-thumb,
2029
- .tactile-switch:has(input:checked) .tactile-switch-thumb,
2030
- .neo-switch:has(input:checked) .neo-switch-thumb,
2031
- .retro-switch:has(input:checked) .retro-switch-thumb,
2032
- .brutal-switch:has(input:checked) .brutal-switch-thumb,
2033
- .cyber-switch:has(input:checked) .cyber-switch-thumb,
2034
- .y2k-switch:has(input:checked) .y2k-switch-thumb,
2035
- .rg-switch:has(input:checked) .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-switch:has(input:checked) .ui-switch-thumb {
2036
- transform: translateX(1.25rem);
2037
- }
2038
-
2039
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 {
2040
2870
  position: absolute !important;
2041
2871
  inline-size: 1px !important;
@@ -2065,6 +2895,613 @@
2065
2895
  }
2066
2896
  }
2067
2897
 
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="retro-glass"])[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="retro-glass"])[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="retro-glass"])[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;
3187
+ }
3188
+
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="retro-glass"]) :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="retro-glass"]) :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) {
3440
+ display: inline-flex;
3441
+ align-items: center;
3442
+ gap: var(--usk-native-field-gap);
3443
+ min-block-size: 24px;
3444
+ color: var(--usk-native-text);
3445
+ }
3446
+
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="retro-glass"]) :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) {
3448
+ inline-size: 1.5rem;
3449
+ block-size: 1.5rem;
3450
+ accent-color: var(--usk-native-primary);
3451
+ }
3452
+
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="retro-glass"]) :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) {
3454
+ position: relative;
3455
+ display: inline-flex;
3456
+ align-items: center;
3457
+ flex: 0 0 auto;
3458
+ inline-size: 2.75rem;
3459
+ block-size: 1.5rem;
3460
+ padding: .18rem;
3461
+ background: var(--usk-native-track);
3462
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
3463
+ border-radius: 999px;
3464
+ }
3465
+
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="retro-glass"]) :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) {
3467
+ inline-size: 1rem;
3468
+ block-size: 1rem;
3469
+ background: var(--usk-native-thumb);
3470
+ border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
3471
+ border-radius: 999px;
3472
+ transition: transform 160ms ease;
3473
+ }
3474
+
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="retro-glass"]) :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); }
3476
+
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) {
3478
+ position: absolute !important;
3479
+ inline-size: 1px !important;
3480
+ block-size: 1px !important;
3481
+ padding: 0 !important;
3482
+ margin: -1px !important;
3483
+ overflow: hidden !important;
3484
+ clip: rect(0, 0, 0, 0) !important;
3485
+ white-space: nowrap !important;
3486
+ border: 0 !important;
3487
+ }
3488
+
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) {
3490
+ position: absolute;
3491
+ inset-block-start: .75rem;
3492
+ inset-inline-start: .75rem;
3493
+ z-index: 1000;
3494
+ padding: .75rem 1rem;
3495
+ color: var(--usk-native-on-primary);
3496
+ background: var(--usk-native-primary);
3497
+ border-radius: var(--usk-native-radius);
3498
+ transform: translateY(calc(-100% - 1rem));
3499
+ }
3500
+
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); }
3502
+ }
3503
+ /* END GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
3504
+
2068
3505
 
2069
3506
  /* styles/retro-glass.css (visual paint) */
2070
3507
  @layer ui-style-kit.presets {
@@ -2094,6 +3531,8 @@
2094
3531
  }
2095
3532
 
2096
3533
  [data-ui="retro-glass"][data-mode="light"] {
3534
+ --lightningcss-light: initial;
3535
+ --lightningcss-dark: ;
2097
3536
  color-scheme: light;
2098
3537
  --rg-panel-alpha: .92;
2099
3538
  --rg-panel-strong-alpha: .98;
@@ -2105,6 +3544,8 @@
2105
3544
  }
2106
3545
 
2107
3546
  [data-ui="retro-glass"][data-mode="dark"] {
3547
+ --lightningcss-light: ;
3548
+ --lightningcss-dark: initial;
2108
3549
  color-scheme: dark;
2109
3550
  --rg-panel-alpha: .82;
2110
3551
  --rg-panel-strong-alpha: .94;
@@ -2116,6 +3557,8 @@
2116
3557
  }
2117
3558
 
2118
3559
  [data-ui="retro-glass"][data-mode="contrast"] {
3560
+ --lightningcss-light: ;
3561
+ --lightningcss-dark: initial;
2119
3562
  color-scheme: dark;
2120
3563
  --rg-panel-alpha: 1;
2121
3564
  --rg-panel-strong-alpha: 1;
@@ -2188,7 +3631,7 @@
2188
3631
  --rg-fg: var(--rg-text);
2189
3632
  --rg-surface-fg: var(--rg-text);
2190
3633
  --rg-muted: var(--rg-text-muted);
2191
- --rg-border: rgb(var(--rg-border-rgb) / var(--rg-border-alpha));
3634
+ --rg-border: rgb(var(--rg-border-rgb) / max(var(--rg-border-alpha), var(--usk-border-min-alpha)));
2192
3635
  --rg-control-fg: var(--rg-text);
2193
3636
  --rg-primary: rgb(var(--rg-primary-rgb));
2194
3637
  --rg-primary-hover: rgb(var(--rg-primary-hover-rgb));
@@ -2223,6 +3666,12 @@
2223
3666
  --rg-spinner-accent: var(--rg-accent);
2224
3667
  }
2225
3668
 
3669
+ @supports (color: color-mix(in srgb,black,white)) {
3670
+ [data-ui="retro-glass"][data-theme][data-mode] {
3671
+ --rg-border: color-mix(in srgb, rgb(var(--rg-border-rgb) / max(var(--rg-border-alpha), var(--usk-border-min-alpha))), var(--rg-text) var(--usk-border-text-mix));
3672
+ }
3673
+ }
3674
+
2226
3675
  [data-ui="retro-glass"] {
2227
3676
  background: radial-gradient(circle at 15% 15%,rgb(var(--rg-primary-rgb)/.18),transparent 28rem),radial-gradient(circle at 85% 10%,rgb(var(--rg-secondary-rgb)/.16),transparent 26rem),radial-gradient(circle at 50% 110%,rgb(var(--rg-accent-rgb)/.14),transparent 34rem),linear-gradient(90deg,rgb(var(--rg-border-rgb)/var(--rg-grid-alpha)) 1px,transparent 1px),linear-gradient(rgb(var(--rg-border-rgb)/var(--rg-grid-alpha)) 1px,transparent 1px),var(--rg-bg);
2228
3677
  color: var(--rg-text);
@@ -2292,6 +3741,7 @@
2292
3741
  border: 1px solid var(--rg-border);
2293
3742
  border-radius: var(--rg-radius-xl);
2294
3743
  box-shadow: var(--rg-shadow-md),0 0 28px var(--rg-glow-primary);
3744
+ -webkit-backdrop-filter: blur(18px) saturate(150%);
2295
3745
  backdrop-filter: blur(18px) saturate(150%);
2296
3746
  transition: transform var(--rg-transition-base),box-shadow var(--rg-transition-base),border-color var(--rg-transition-base);
2297
3747
  border-top-color: #ffffff47;
@@ -2336,6 +3786,7 @@
2336
3786
  background: linear-gradient(180deg,#00000014,#ffffff0a),var(--rg-surface-soft);
2337
3787
  border: 1px solid rgb(var(--rg-border-rgb)/.36);
2338
3788
  border-radius: var(--rg-radius-lg);
3789
+ -webkit-backdrop-filter: blur(12px) saturate(140%);
2339
3790
  backdrop-filter: blur(12px) saturate(140%);
2340
3791
  box-shadow: inset 0 8px 22px #00000029;
2341
3792
  }
@@ -2355,6 +3806,7 @@
2355
3806
  border: 1px solid rgb(var(--rg-border-rgb)/.56);
2356
3807
  border-radius: var(--rg-radius-md);
2357
3808
  box-shadow: var(--rg-shadow-sm);
3809
+ -webkit-backdrop-filter: blur(14px) saturate(150%);
2358
3810
  backdrop-filter: blur(14px) saturate(150%);
2359
3811
  font: inherit;
2360
3812
  font-family: var(--rg-font-display);
@@ -2431,6 +3883,7 @@
2431
3883
  border: 1px solid rgb(var(--rg-border-rgb)/.44);
2432
3884
  border-radius: var(--rg-radius-md);
2433
3885
  font: inherit;
3886
+ -webkit-backdrop-filter: blur(10px);
2434
3887
  backdrop-filter: blur(10px);
2435
3888
  outline: none;
2436
3889
  padding: .8rem 1rem;
@@ -2460,6 +3913,7 @@
2460
3913
  border-radius: var(--rg-radius-pill);
2461
3914
  box-shadow: var(--rg-shadow-sm);
2462
3915
  letter-spacing: .08em;
3916
+ -webkit-backdrop-filter: blur(12px);
2463
3917
  backdrop-filter: blur(12px);
2464
3918
  align-items: center;
2465
3919
  padding: .35rem .75rem;
@@ -2500,6 +3954,7 @@
2500
3954
  border: 1px solid var(--rg-border);
2501
3955
  border-radius: var(--rg-radius-xl);
2502
3956
  box-shadow: var(--rg-shadow-md),0 0 24px var(--rg-glow-primary);
3957
+ -webkit-backdrop-filter: blur(18px) saturate(150%);
2503
3958
  backdrop-filter: blur(18px) saturate(150%);
2504
3959
  flex-wrap: wrap;
2505
3960
  display: flex;
@@ -2535,6 +3990,7 @@
2535
3990
  max-inline-size: 16rem;
2536
3991
  color: var(--rg-text);
2537
3992
  box-shadow: var(--rg-shadow-md),0 0 1.25rem var(--rg-glow-primary);
3993
+ -webkit-backdrop-filter: blur(14px) saturate(145%);
2538
3994
  backdrop-filter: blur(14px) saturate(145%);
2539
3995
  letter-spacing: .04em;
2540
3996
  border: 1px solid #ffffff57;
@@ -2582,6 +4038,7 @@
2582
4038
  border: 1px solid var(--rg-border);
2583
4039
  border-radius: var(--rg-radius-lg);
2584
4040
  box-shadow: var(--rg-shadow-md),0 0 22px var(--rg-glow-primary);
4041
+ -webkit-backdrop-filter: blur(16px);
2585
4042
  backdrop-filter: blur(16px);
2586
4043
  }
2587
4044
 
@@ -2658,7 +4115,7 @@
2658
4115
  color: var(--rg-danger);
2659
4116
  }
2660
4117
 
2661
- @supports not (backdrop-filter: blur(1px)) {
4118
+ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
2662
4119
  [data-ui="retro-glass"] {
2663
4120
  --rg-panel-alpha: .96;
2664
4121
  --rg-panel-strong-alpha: 1;
@@ -2698,6 +4155,7 @@
2698
4155
  block-size: 2rem;
2699
4156
  inline-size: 2rem;
2700
4157
  box-shadow: 0 0 1.35rem var(--rg-glow-primary),inset 0 0 .85rem #ffffff2e;
4158
+ -webkit-backdrop-filter: blur(.4rem);
2701
4159
  backdrop-filter: blur(.4rem);
2702
4160
  vertical-align: -.2em;
2703
4161
  border-radius: 38% 62% 48% 52%;
@@ -2739,6 +4197,296 @@
2739
4197
  }
2740
4198
  }
2741
4199
 
4200
+ .rg-card-media {
4201
+ aspect-ratio: 16 / 9;
4202
+ object-fit: cover;
4203
+ border: 1px solid rgb(var(--rg-border-rgb)/.72);
4204
+ border-radius: var(--rg-radius-lg);
4205
+ inline-size: 100%;
4206
+ display: block;
4207
+ }
4208
+
4209
+ .rg-card-service {
4210
+ gap: var(--rg-space-3);
4211
+ text-align: center;
4212
+ align-content: start;
4213
+ display: grid;
4214
+ position: relative;
4215
+ overflow: visible;
4216
+ }
4217
+
4218
+ .rg-card-service > .rg-icon-medallion {
4219
+ z-index: 2;
4220
+ justify-self: center;
4221
+ margin-block-start: -2.15rem;
4222
+ position: relative;
4223
+ }
4224
+
4225
+ .rg-card-service > .rg-card-media + .rg-icon-medallion {
4226
+ margin-block-start: -2.15rem;
4227
+ }
4228
+
4229
+ .rg-card-feature {
4230
+ gap: var(--rg-space-4);
4231
+ grid-template-columns: auto minmax(0, 1fr);
4232
+ align-items: start;
4233
+ display: grid;
4234
+ }
4235
+
4236
+ .rg-card-accent-edge {
4237
+ border-inline-start: .35rem solid var(--rg-primary);
4238
+ }
4239
+
4240
+ .rg-icon-medallion {
4241
+ background: var(--rg-primary);
4242
+ block-size: 3.75rem;
4243
+ inline-size: 3.75rem;
4244
+ color: var(--rg-on-primary);
4245
+ border: 2px solid rgb(var(--rg-border-rgb)/.82);
4246
+ border-radius: 50%;
4247
+ flex: none;
4248
+ place-items: center;
4249
+ padding: .7rem;
4250
+ line-height: 1;
4251
+ display: inline-grid;
4252
+ }
4253
+
4254
+ .rg-icon-medallion > :where(svg, img) {
4255
+ object-fit: contain;
4256
+ block-size: 100%;
4257
+ inline-size: 100%;
4258
+ }
4259
+
4260
+ .rg-button.rg-button-cut, .rg-button-cut, :where([data-ui="retro-glass"]) .ui-button.rg-button-cut {
4261
+ clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
4262
+ border-radius: 0;
4263
+ }
4264
+
4265
+ .rg-button.rg-button-cut:focus-visible, .rg-button-cut:focus-visible, :where([data-ui="retro-glass"]) .ui-button.rg-button-cut:focus-visible {
4266
+ outline-offset: -3px;
4267
+ }
4268
+
4269
+ .rg-button.rg-button-outline-heavy, .rg-button-outline-heavy, :where([data-ui="retro-glass"]) .ui-button.rg-button-outline-heavy {
4270
+ color: var(--rg-primary);
4271
+ border-style: solid;
4272
+ border-width: 2px;
4273
+ border-color: var(--rg-primary);
4274
+ box-shadow: none;
4275
+ background: none;
4276
+ }
4277
+
4278
+ .rg-button.rg-button-outline-heavy:hover, .rg-button-outline-heavy:hover, :where([data-ui="retro-glass"]) .ui-button.rg-button-outline-heavy:hover {
4279
+ background: var(--rg-primary);
4280
+ color: var(--rg-on-primary);
4281
+ border-color: var(--rg-primary-hover);
4282
+ }
4283
+
4284
+ .rg-badge-seal {
4285
+ aspect-ratio: 1;
4286
+ background: var(--rg-surface-strong);
4287
+ inline-size: 5rem;
4288
+ min-inline-size: 5rem;
4289
+ color: var(--rg-text);
4290
+ border: 2px solid var(--rg-primary);
4291
+ text-align: center;
4292
+ font-family: var(--rg-font-heading);
4293
+ letter-spacing: .04em;
4294
+ border-radius: 50%;
4295
+ align-content: center;
4296
+ place-items: center;
4297
+ padding: .65rem;
4298
+ font-size: .72rem;
4299
+ font-weight: 900;
4300
+ line-height: 1.05;
4301
+ display: inline-grid;
4302
+ }
4303
+
4304
+ .rg-feature-strip {
4305
+ background: var(--rg-card-bg);
4306
+ color: var(--rg-text);
4307
+ border: 1px solid var(--rg-border);
4308
+ border-radius: var(--rg-radius-lg);
4309
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4310
+ display: grid;
4311
+ overflow: hidden;
4312
+ }
4313
+
4314
+ .rg-feature-item {
4315
+ align-items: center;
4316
+ gap: var(--rg-space-3);
4317
+ min-inline-size: 0;
4318
+ padding: var(--rg-space-4);
4319
+ border-inline-end: 1px solid rgb(var(--rg-border-rgb)/.62);
4320
+ grid-template-columns: auto minmax(0, 1fr);
4321
+ display: grid;
4322
+ }
4323
+
4324
+ .rg-feature-item:last-child {
4325
+ border-inline-end: 0;
4326
+ }
4327
+
4328
+ .rg-feature-item > :where(p, small) {
4329
+ color: var(--rg-text-muted);
4330
+ margin: 0;
4331
+ }
4332
+
4333
+ .rg-callout-bar {
4334
+ align-items: center;
4335
+ gap: var(--rg-space-4);
4336
+ padding: var(--rg-space-4) var(--rg-space-5);
4337
+ background: var(--rg-card-bg);
4338
+ color: var(--rg-text);
4339
+ border: 1px solid var(--rg-border);
4340
+ border-radius: var(--rg-radius-lg);
4341
+ grid-template-columns: auto minmax(0, 1fr) auto;
4342
+ display: grid;
4343
+ }
4344
+
4345
+ .rg-callout-bar > :where(p, div) {
4346
+ min-inline-size: 0;
4347
+ }
4348
+
4349
+ .rg-callout-bar > :where(.rg-button, a, button):last-child, :where([data-ui="retro-glass"]) .rg-callout-bar>:where(.ui-button,a,button):last-child {
4350
+ justify-self: end;
4351
+ }
4352
+
4353
+ .rg-eyebrow {
4354
+ color: var(--rg-primary);
4355
+ font-family: var(--rg-font-heading);
4356
+ letter-spacing: .14em;
4357
+ text-transform: uppercase;
4358
+ margin: 0;
4359
+ font-size: .76rem;
4360
+ font-weight: 900;
4361
+ line-height: 1.2;
4362
+ }
4363
+
4364
+ .rg-media-scrim {
4365
+ isolation: isolate;
4366
+ background: var(--rg-surface-soft);
4367
+ border: 1px solid var(--rg-border);
4368
+ border-radius: var(--rg-radius-lg);
4369
+ min-block-size: 12rem;
4370
+ position: relative;
4371
+ overflow: hidden;
4372
+ }
4373
+
4374
+ .rg-media-scrim > :where(img, picture, video) {
4375
+ block-size: 100%;
4376
+ inline-size: 100%;
4377
+ min-block-size: inherit;
4378
+ object-fit: cover;
4379
+ display: block;
4380
+ }
4381
+
4382
+ .rg-media-scrim > :where(figcaption, [data-media-caption]) {
4383
+ z-index: 1;
4384
+ color: #fff;
4385
+ background: linear-gradient(to top, #000000e6, #00000094 56%, #0000);
4386
+ padding: clamp(1rem, 4vw, 2rem);
4387
+ position: absolute;
4388
+ inset-block-end: 0;
4389
+ inset-inline: 0;
4390
+ }
4391
+
4392
+ .rg-media-scrim > :where(figcaption, [data-media-caption]) * {
4393
+ color: inherit;
4394
+ }
4395
+
4396
+ @media (max-width: 42rem) {
4397
+ .rg-callout-bar {
4398
+ grid-template-columns: 1fr;
4399
+ align-items: start;
4400
+ }
4401
+
4402
+ .rg-callout-bar > :where(.rg-button, a, button):last-child, :where([data-ui="retro-glass"]) .rg-callout-bar>:where(.ui-button,a,button):last-child {
4403
+ justify-self: stretch;
4404
+ }
4405
+
4406
+ .rg-feature-item {
4407
+ border-inline-end: 0;
4408
+ border-block-end: 1px solid rgb(var(--rg-border-rgb)/.62);
4409
+ }
4410
+
4411
+ .rg-feature-item:last-child {
4412
+ border-block-end: 0;
4413
+ }
4414
+ }
4415
+
4416
+ .rg-card-service, .rg-card-feature, .rg-feature-strip, .rg-callout-bar {
4417
+ background: linear-gradient(135deg,#ffffff29,#ffffff08),var(--rg-card-bg);
4418
+ -webkit-backdrop-filter: blur(18px) saturate(150%);
4419
+ backdrop-filter: blur(18px) saturate(150%);
4420
+ box-shadow: var(--rg-shadow-md),0 0 1.8rem rgb(var(--rg-primary-rgb)/.18);
4421
+ }
4422
+
4423
+ .rg-icon-medallion, .rg-badge-seal {
4424
+ background: linear-gradient(145deg,#ffffff4d,#ffffff0d),rgb(var(--rg-primary-rgb)/.72);
4425
+ -webkit-backdrop-filter: blur(12px) saturate(150%);
4426
+ backdrop-filter: blur(12px) saturate(150%);
4427
+ box-shadow: 0 0 1.35rem rgb(var(--rg-primary-rgb)/.28);
4428
+ border-color: #ffffff52;
4429
+ }
4430
+
4431
+ .rg-button-outline-heavy {
4432
+ -webkit-backdrop-filter: blur(10px);
4433
+ backdrop-filter: blur(10px);
4434
+ background: #ffffff0f;
4435
+ }
4436
+
4437
+ .rg-button.rg-button-cut, .rg-button-cut, :where([data-ui="retro-glass"]) .ui-button.rg-button-cut {
4438
+ clip-path: polygon(.8rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .8rem) 100%, 0 100%, 0 .35rem);
4439
+ justify-content: center;
4440
+ justify-self: center;
4441
+ inline-size: min(100%, 16rem);
4442
+ min-inline-size: 6rem;
4443
+ max-inline-size: 100%;
4444
+ }
4445
+
4446
+ .rg-button.rg-button-outline-heavy, .rg-button-outline-heavy, :where([data-ui="retro-glass"]) .ui-button.rg-button-outline-heavy {
4447
+ background: rgb(var(--rg-surface-strong-rgb)/.2);
4448
+ clip-path: polygon(0 0, calc(100% - .8rem) 0, 100% .35rem, 100% 100%, .8rem 100%, 0 calc(100% - .35rem));
4449
+ box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb)/.78),0 .45rem 1rem rgb(var(--rg-primary-rgb)/.14);
4450
+ border-width: 1px;
4451
+ border-radius: 0;
4452
+ }
4453
+
4454
+ .rg-card-service, .rg-media-scrim, .rg-feature-strip, .rg-callout-bar, .rg-well {
4455
+ background: rgb(var(--rg-surface-strong-rgb)/.34);
4456
+ border: 1px solid rgb(var(--rg-border-rgb)/.72);
4457
+ box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb)/.78),0 .8rem 1.6rem rgb(var(--rg-primary-rgb)/.14);
4458
+ -webkit-backdrop-filter: blur(12px);
4459
+ backdrop-filter: blur(12px);
4460
+ border-radius: .75rem 1.35rem .75rem 1.15rem;
4461
+ }
4462
+
4463
+ [data-ui="retro-glass"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4464
+ color: var(--rg-text);
4465
+ background: rgb(var(--rg-surface-strong-rgb)/.24);
4466
+ border: 1px solid var(--rg-primary);
4467
+ box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb)/.78),0 .35rem .85rem rgb(var(--rg-primary-rgb)/.14);
4468
+ border-radius: .55rem .9rem .55rem .78rem;
4469
+ }
4470
+
4471
+ [data-ui="retro-glass"][data-theme][data-mode] :where(dialog) {
4472
+ background: rgb(var(--rg-surface-strong-rgb)/.72);
4473
+ border: 1px solid rgb(var(--rg-border-rgb)/.78);
4474
+ box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb)/.8),0 1rem 2.2rem rgb(var(--rg-primary-rgb)/.18);
4475
+ -webkit-backdrop-filter: blur(14px);
4476
+ backdrop-filter: blur(14px);
4477
+ border-radius: .85rem 1.45rem .85rem 1.2rem;
4478
+ }
4479
+
4480
+ .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :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="retro-glass"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"]:after {
4481
+ border: .09em solid #ffffff73;
4482
+ clip-path: none;
4483
+ background: linear-gradient(135deg, #ffffff59, #0000 45%), conic-gradient(currentColor, #0000 44%, currentColor);
4484
+ border-block-start-color: currentColor;
4485
+ border-radius: 38% 62% 48% 52%;
4486
+ animation: .96s linear infinite rg-spin;
4487
+ box-shadow: 0 0 .42em, inset 0 0 .2em #ffffff42;
4488
+ }
4489
+
2742
4490
  @media (prefers-reduced-motion: reduce) {
2743
4491
  [data-ui="retro-glass"] *, [data-ui="retro-glass"] :before, [data-ui="retro-glass"] :after {
2744
4492
  scroll-behavior: auto !important;
@@ -2755,8 +4503,10 @@
2755
4503
  }
2756
4504
 
2757
4505
  @media (forced-colors: active) {
2758
- [data-ui="retro-glass"] * {
2759
- forced-color-adjust: auto;
4506
+ @supports (forced-color-adjust: auto) {
4507
+ [data-ui="retro-glass"] * {
4508
+ forced-color-adjust: auto;
4509
+ }
2760
4510
  }
2761
4511
 
2762
4512
  [data-ui="retro-glass"] :where(:focus-visible) {