-
Notifications
You must be signed in to change notification settings - Fork 68
/
TB.css
2870 lines (2855 loc) · 165 KB
/
TB.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
:root {
/* Core JSON */
--zoom: 1;
--meshSVGfill: rgb(0,102,239);
/* FIXED */
--overlay-opacity: .35;
--body-bg: var(--white);
/* Opacity */
--quiet: 68%;
--disabled: 38%;
--hover: 50%;
/* Radius */
--radius-0: 0px;
--radius-2: calc(var(--radius-1) * 2);
--radius-3: calc(var(--radius-1) * 3);
--radius-4: calc(var(--radius-1) * 4);
--radius-5: calc(var(--radius-1) * 5);
--radius-6: calc(var(--radius-1) * 6);
--radius-7: calc(var(--radius-1) * 7);
--radius-8: calc(var(--radius-1) * 8);
--radius-9: calc(var(--radius-1) * 9);
--radius-10: calc(var(--radius-1) * 10);
--radius-quarter: calc(var(--radius-1) / 4);
--radius-half: calc(var(--radius-1) / 2);
/* Spacing */
--spacing-0: 0px;
--spacing-2: calc(var(--spacing-1) * 2);
--spacing-3: calc(var(--spacing-1) * 3);
--spacing-4: calc(var(--spacing-1) * 4);
--spacing-5: calc(var(--spacing-1) * 5);
--spacing-6: calc(var(--spacing-1) * 6);
--spacing-7: calc(var(--spacing-1) * 7);
--spacing-8: calc(var(--spacing-1) * 8);
--spacing-9: calc(var(--spacing-1) * 9);
--spacing-10: calc(var(--spacing-1) * 10);
--spacing-quarter: calc(var(--spacing-1) / 4);
--spacing-half: calc(var(--spacing-1) / 2);
--negative-size-half: calc(0 - var(--spacing-1) / 2);
/* Borders */
--border-opacity: 15%;
--border-0: 0px;
--border-2: calc(var(--border-1) * 2);
--border-3: calc(var(--border-1) * 3);
--border-4: calc(var(--border-1) * 4);
/* elevation settings */
--change-1: calc(1 + calc(var(--elevation-change) * 1));
--change-2: calc(1 + calc(var(--elevation-change) * 2));
--change-3: calc(1 + calc(var(--elevation-change) * 3));
--change-4: calc(1 + calc(var(--elevation-change) * 4));
--change-5: calc(1 + calc(var(--elevation-change) * 5));
--change-6: calc(1 + calc(var(--elevation-change) * 6));
--change-7: calc(1 + calc(var(--elevation-change) * 7));
--change-8: calc(1 + calc(var(--elevation-change) * 8));
--change-9: calc(1 + calc(var(--elevation-change) * 9));
/* elevation */
--elevation-1: calc(var(--elevation-horizontal) * var(--change-1)) calc(var(--elevation-vertical) * var(--change-1)) calc(var(--elevation-blur) * var(--change-1)) calc(var(--elevation-spread) * var(--change-1)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-1)) ),
0 0 calc(var(--base-elevation-blur) * var(--change-1)) calc(var(--base-elevation-spread) * var(--change-1)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-1)));
--elevation-2: calc(var(--elevation-horizontal) * var(--change-2)) calc(var(--elevation-vertical)* var(--change-2)) calc(var(--elevation-blur) * var(--change-2)) calc(var(--elevation-spread) * var(--change-2)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-2)) ),
0 0 calc(var(--base-elevation-blur) * var(--change-2)) calc(var(--base-elevation-spread) * var(--change-2)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-2)));
--elevation-3: calc(var(--elevation-horizontal) * var(--change-3)) calc(var(--elevation-vertical)* var(--change-3)) calc(var(--elevation-blur) * var(--change-3)) calc(var(--elevation-spread) * var(--change-3)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-3)) ),
0 0 calc(var(--base-elevation-blur) * var(--change-3)) calc(var(--base-elevation-spread) * var(--change-3)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-3)));
--elevation-4: calc(var(--elevation-horizontal) * var(--change-4)) calc(var(--elevation-vertical)* var(--change-4)) calc(var(--elevation-blur) * var(--change-4)) calc(var(--elevation-spread) * var(--change-4)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-4)) ),
0 0 calc(var(--base-elevation-blur) * var(--change-4)) calc(var(--base-elevation-spread) * var(--change-4)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-4)));
--elevation-5: calc(var(--elevation-horizontal) * var(--change-5)) calc(var(--elevation-vertical)* var(--change-5)) calc(var(--elevation-blur) * var(--change-5)) calc(var(--elevation-spread) * var(--change-5)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-5)) ),
0 0 calc(var(--base-elevation-blur) * var(--change-5)) calc(var(--base-elevation-spread) * var(--change-5)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-5)));
--elevation-6: calc(var(--elevation-horizontal) * var(--change-6)) calc(var(--elevation-vertical)* var(--change-6)) calc(var(--elevation-blur) * var(--change-6)) calc(var(--elevation-spread) * var(--change-6)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-6)) ),
0 0 calc(var(--base-elevation-blur) * var(--change-6)) calc(var(--base-elevation-spread) * var(--change-6)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-6)));
--elevation-7: calc(var(--elevation-horizontal) * var(--change-7)) calc(var(--elevation-vertical)* var(--change-7)) calc(var(--elevation-blur) * var(--change-7)) calc(var(--elevation-spread) * var(--change-7)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-7)) ),
0 0 calc(var(--base-elevation-blur) * var(--change-7)) calc(var(--base-elevation-spread) * var(--change-7)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-7)));
--elevation-8: calc(var(--elevation-horizontal) * var(--change-8)) calc(var(--elevation-vertical)* var(--change-8)) calc(var(--elevation-blur) * var(--change-8)) calc(var(--elevation-spread) * var(--change-8)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-8)) ),
0 0 calc(var(--base-elevation-blur) * var(--change-8)) calc(var(--base-elevation-spread) * var(--change-8)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-8)));
--elevation-9: calc(var(--elevation-horizontal) * var(--change-9)) calc(var(--elevation-vertical)* var(--change-9)) calc(var(--elevation-blur) * var(--change-9)) calc(var(--elevation-spread) * var(--change-9)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-9)) ),
0 0 calc(var(--base-elevation-blur) * var(--change-9)) calc(var(--base-elevation-spread) * var(--change-9)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-9)));
/* Focus */
--focusBlur: 4;
--focusBorder: 2px;
/* Base JSON - USER INPUT */
--primaryFont: Open Sans;
--secondaryFont: Open Sans;
--baseFont: 16px;
--fontWeight-0: 300;
--fontWeight-1: 400;
--fontWeight-2: 600;
--fontWeight-3: 700;
--fontWeight-4: 800;
--standard-LineHeight: 160%;
--header-LineHeight: 110%;
--sm-LineHeight: 110%;
--headerChange: 42;
--headerWeight: 700;
/* Typography */
--Display1FontSize: 76.48px;
--Display1FontWeight: 400;
--Display1FontFamily: Open Sans;
--Display1LetterSpacing: -1.5%;
--Display1LineHeight: 130%;
--Display1TextDecoration: none;
--Display1TextTransform: none;
--Display2FontSize: 69.76px;
--Display2FontWeight: 400;
--Display2FontFamily: Open Sans;
--Display2LetterSpacing: -0.5%;
--Display2LineHeight: 130%;
--Display2TextDecoration: none;
--Display2TextTransform: none;
--h1FontSize: 56.32px;
--h1FontWeight: 400;
--h1FontFamily: var(--secondaryFont);
--h1LetterSpacing: -0.5%;
--h1LineHeight: 130%;
--h1TextDecoration: none;
--h1TextTransform: none;
--h2FontSize: 49.6px;
--h2FontWeight: 400;
--h2FontFamily: var(--secondaryFont);
--h2LetterSpacing: -0.5%;
--h2LineHeight: 130%;
--h2TextDecoration: none;
--h2TextTransform: none;
--h3FontSize: 42.88px;
--h3FontWeight: 400;
--h3FontFamily: var(--secondaryFont);
--h3LetterSpacing: -0.5%;
--h3LineHeight: 130%;
--h3TextDecoration: none;
--h3TextTransform: none;
--h4FontSize: 36.16px;
--h4FontWeight: 400;
--h4FontFamily: var(--secondaryFont);
--h4LetterSpacing: -0.5%;
--h4LineHeight: 130%;
--h4TextDecoration: none;
--h4TextTransform: none;
--h5FontSize: 29.44px;
--h5FontWeight: 400;
--h5FontFamily: var(--secondaryFont);
--h5LetterSpacing: -0.5%;
--h5LineHeight: 130%;
--h5TextDecoration: none;
--h5TextTransform: none;
--h6FontSize: 25.72px;
--h6FontWeight: 400;
--h6FontFamily: var(--secondaryFont);
--h6LetterSpacing: -0.5%;
--h6LineHeight: 130%;
--h6TextDecoration: none;
--h6TextTransform: none;
--body1FontSize: 16px;
--body1FontWeight: 500;
--body1FontFamily: var(--primaryFont);
--body1LetterSpacing: 2%;
--body1LineHeight: 160%;
--body1TextDecoration: none;
--body1TextTransform: none;
--body1-boldFontSize: 16px;
--body1-boldFontWeight: 700;
--body1-boldFontFamily: var(--primaryFont);
--body1-boldLetterSpacing: 2%;
--body1-boldLineHeight: 160%;
--body1-boldTextDecoration: none;
--body1-boldTextTransform: none;
--body2FontSize: 14px;
--body2FontWeight: 600;
--body2FontFamily: var(--primaryFont);
--body2LetterSpacing: 1.75%;
--body2LineHeight: 160%;
--body2TextDecoration: none;
--body2TextTransform: none;
--body2-boldFontSize: 14px;
--body2-boldFontWeight: 700;
--body2-boldFontFamily: var(--primaryFont);
--body2-boldLetterSpacing: 1.75%;
--body2-boldLineHeight: 160%;
--body2-boldTextDecoration: none;
--body2-boldTextTransform: none;
--body3FontSize: 18px;
--body3FontWeight: 500;
--body3FontFamily: var(--primaryFont);
--body3LetterSpacing: 2.25%;
--body3LineHeight: 160%;
--body3TextDecoration: none;
--body3TextTransform: none;
--body3-boldFontSize: 18px;
--body3-boldFontWeight: 700;
--body3-boldFontFamily: var(--primaryFont);
--body3-boldLetterSpacing: 2.25%;
--body3-boldLineHeight: 160%;
--body3-boldTextDecoration: none;
--body3-boldTextTransform: none;
--subtitle1FontSize: 16px;
--subtitle1FontWeight: 600;
--subtitle1FontFamily: var(--primaryFont);
--subtitle1LetterSpacing: 2%;
--subtitle1LineHeight: 110%;
--subtitle1TextDecoration: none;
--subtitle1TextTransform: none;
--subtitle2FontSize: 14px;
--subtitle2FontWeight: 700;
--subtitle2FontFamily: var(--primaryFont);
--subtitle2LetterSpacing: 1.75%;
--subtitle2LineHeight: 110%;
--subtitle2TextDecoration: none;
--subtitle2TextTransform: none;
--captionFontSize: 12px;
--captionFontWeight: 600;
--captionFontFamily: var(--primaryFont);
--captionLetterSpacing: 1.5%;
--captionLineHeight: 110%;
--captionTextDecoration: none;
--captionTextTransform: none;
--caption-boldFontSize: 12px;
--caption-boldFontWeight: 700;
--caption-boldFontFamily: var(--primaryFont);
--caption-boldLetterSpacing: 1.5%;
--caption-boldLineHeight: 110%;
--caption-boldTextDecoration: none;
--caption-boldTextTransform: none;
--overlineFontSize: 10px;
--overlineFontWeight: 600;
--overlineFontFamily: var(--primaryFont);
--overlineLetterSpacing: 0.12%;
--overlineLineHeight: 110%;
--overlineTextDecoration: none;
--overlineTextTransform: none;
--overline-largeFontSize: 14px;
--overline-largeFontWeight: 600;
--overline-largeFontFamily: var(--primaryFont);
--overline-largeLetterSpacing: 1.75%;
--overline-largeLineHeight: 110%;
--overline-largeTextDecoration: none;
--overline-largeTextTransform: none;
--overline-XLFontSize: 16px;
--overline-XLFontWeight: 700;
--overline-XLFontFamily: var(--primaryFont);
--overline-XLLetterSpacing: 2%;
--overline-XLLineHeight: 110%;
--overline-XLTextDecoration: none;
--overline-XLTextTransform: none;
--label-1FontSize: 14px;
--label-1FontWeight: 700;
--label-1FontFamily: var(--primaryFont);
--label-1LetterSpacing: 1.75%;
--label-1LineHeight: 110%;
--label-1TextDecoration: none;
--label-1TextTransform: none;
--label-1-allCapsFontSize: 14px;
--label-1-allCapsFontWeight: 700;
--label-1-allCapsFontFamily: var(--primaryFont);
--label-1-allCapsLetterSpacing: 1.75%;
--label-1-allCapsLineHeight: 110%;
--label-1-allCapsTextDecoration: none;
--label-1-allCapsTextTransform: none;
--label-2FontSize: 12px;
--label-2FontWeight: 700;
--label-2FontFamily: var(--primaryFont);
--label-2LetterSpacing: 1.5%;
--label-2LineHeight: 110%;
--label-2TextDecoration: none;
--label-2TextTransform: none;
--label-2-allCapsFontSize: 12px;
--label-2-allCapsFontWeight: 700;
--label-2-allCapsFontFamily: var(--primaryFont);
--label-2-allCapsLetterSpacing: 1.5%;
--label-2-allCapsLineHeight: 110%;
--label-2-allCapsTextDecoration: none;
--label-2-allCapsTextTransform: none;
--label-smallFontSize: 10px;
--label-smallFontWeight: 700;
--label-smallFontFamily: var(--primaryFont);
--label-smallLetterSpacing: 0.12%;
--label-smallLineHeight: 110%;
--label-smallTextDecoration: none;
--label-smallTextTransform: none;
--CTAFontSize: 16px;
--CTAFontWeight: 500;
--CTAFontFamily: var(--primaryFont);
--CTALetterSpacing: 2%;
--CTALineHeight: 110%;
--CTATextDecoration: none;
--CTATextTransform: uppercase;
--CTA-SmallFontSize: 14px;
--CTA-SmallFontWeight: 600;
--CTA-SmallFontFamily: var(--primaryFont);
--CTA-SmallLetterSpacing: 1.75%;
--CTA-SmallLineHeight: 110%;
--CTA-SmallTextDecoration: none;
--CTA-SmallTextTransform: none;
--smallFontSize: 10.8px;
--smallFontWeight: 500;
--smallFontFamily: var(--primaryFont);
--smallLetterSpacing: 0.13%;
--smallLineHeight: 110%;
--smallTextDecoration: none;
--smallTextTransform: none;
--small-semiboldFontSize: 10.8px;
--small-semiboldFontWeight: 700;
--small-semiboldFontFamily: var(--primaryFont);
--small-semiboldLetterSpacing: 0.13%;
--small-semiboldLineHeight: 110%;
--small-semiboldTextDecoration: none;
--small-semiboldTextTransform: none;
--statFontSize: 48px;
--statFontWeight: 700;
--statFontFamily: var(--primaryFont);
--statLetterSpacing: 6%;
--statLineHeight: 110%;
--statTextDecoration: none;
--statTextTransform: none;
/* Base JSON */
/* User assigned Typography Styles */
--buttonTypography: var(--CTAFontWeight) var(--CTAFontSize) / var(--CTALineHeight) var(--CTAFontFamily);
--buttonTextDecoration: var(--CTATextDecoration);
--buttonTextTransform: var(--CTATextTransform);
--buttonLetterSpacing: var(--CTALetterSpacing);
--sm-buttonTypography: var(--CTA-SmallFontWeight) var(--CTA-SmallFontSize) / var(--CTA-SmallLineHeight) var(--CTA-SmallFontFamily);
--sm-buttonTextDecoration: var(--CTA-SmallTextDecoration);
--sm-buttonTextTransform: var(--CTA-SmallTextTransform);
--sm-buttonLetterSpacing: var(--CTA-SmallLetterSpacing);
--chipTypography: var(--captionFontWeight) var(--captionFontSize) / var(--captionLineHeight) var(--captionFontFamily);
--chipTextTransform: var(--captionTextTransform);
--chipLetterSpacing: var(--captionLetterSpacing);
--hero-heroTitleTypography: var(--Display1FontWeight) var(--Display1FontSize) / var(--Display1LineHeight) var(--Display1FontFamily);
--hero-heroTitleTransform: var(--Display1TextTransform);
--hero-heroTitleSpacing: var(--Display1LetterSpacing);
--hero-heroBodyTypography: var(--body1FontWeight) var(--body1FontSize) / var(--body1LineHeight) var(--body1FontFamily);
--hero-heroBodyTransform: var(--body1-boldTextTransform);
--hero-heroBodySpacing: var(--body1-boldLetterSpacing);
--tableheaderTypography: var(--label-1FontWeight) var(--label-1FontSize) / var(--label-1LineHeight) var(--label-1FontFamily);
--tableheaderSpacing: var(--label-1LetterSpacing);
--tableheaderTransform: var(--label-1TextTransform);
--tablebodyTypography: var(--body1FontWeight) var(--body1FontSize) / var(--body1LineHeight) var(--body1FontFamily);
--tablebodySpacing: var(--body1LetterSpacing);
--tablebodyTransform: var(--body1TextTransform);
/* Targets */
--min-target: 44px;
--mobile-min-target: 48px;
/* Animation */
--animation-speed: 600ms;
--animation-distance: 8px;
--animation-focus-distance: 8px;
/* Input */
--input-radius: var(--radius-1);
--input-hover-radius: calc(var(--radius-1) + 3px);
/* Radius */
--radius-1: 8px;
/* Spacing */
--spacing-1: 8px;
/* Borders */
--border-1: 1px;
/* elevation settings */
--elevation-change: .2;
--elevation-horizontal: 2px;
--elevation-vertical: 2px;
--elevation-blur: 2px;
--elevation-spread: 2px;
--base-elevation-blur: 2px;
--base-elevation-spread: 2px;
--elevation-rgb: 0, 0, 0;
--elevation-opacity: 0.04;
--base-elevation-opacity: 0.04;
--elevation-0: 0 0 0 0 rgba(0,0,0,0);
/* bevels */
--bevel-horizontal: 6px;
--bevel-vertical: 6px;
--bevel-spread: 1px;
--bevel-blur: 6px;
--bevel-light-opacity: 0.3;
--bevel-dark-opacity: 0.1;
--bevel-change: 0.08;
--bevel-0: 0 0 0 0 rgba(0,0,0,0);
/* glow settings */
--glow-blur: 2px;
--glow-spread: 2px;
--glow-rgb: 0, 0, 0;
--glow-opacity: 0.2;
--glow-change: 0.2;
/* States */
--info: #0066EF;
--on-info: rgba(255,255,255,1);
--success: #327D35;
--on-success: rgba(255,255,255,1);
--warning: #A06B1A;
--on-warning: rgba(255,255,255,1);
--danger: #D62B2B;
--on-danger: rgba(255,255,255,1);
/* Dropdowns */
--dropdown-shadow: var(--elevation-2);
--dropdown-radius: 1;
--dropdown-focus-bg: linear-gradient(90deg, var(--button) var(--background), var(--transparent) var(--background));
--dm-dropdown-focus-bg: linear-gradient(90deg, var(--button) var(--background), var(--transparent) var(--background));
--dropdown-hover-style: 100%;
--dropdown-bottom-hover-bg: linear-gradient(0deg, var(--button-half) var(--background), var(--transparent) var(--background)) !important;
--dm-dropdown-bottom-hover-bg: linear-gradient(0deg, var(--button) var(--background), var(--transparent) var(--background)) !important;
/* Buttons */
--button-padding: 3;
--button-border: 2;
--button-radius: 3;
--button-minwidth: 5.5;
--button-height: 5.5;
--button-shadow: var(--elevation-1);
--sm-button-height: 4;
--sm-button-padding: 2;
--mobile-button-radius: calc(calc( calc(var(--button-radius) * var(--radius-1)) / calc(var(--button-height) * var(--spacing-1)) ) * var(--mobile-min-target));
/* Chips */
--chip-minwidth: 80px;
--chip-height: 5;
--chip-radius: 2;
--chip-padding: 2;
--chip-shadow: var(--elevation-2);
/* Swicth */
--switch-height: var(--spacing-3);
--switch-radius: 3;
--switch-bar-height: 0.5;
--switch-bar-radius: 0.5;
/* Card */
--card-padding: 2;
--card-gap: 2;
--card-radius: 3;
--card-hover-radius: calc(calc(var(--radius-1) * var(--card-radius)) * 3px);
--card-bevel: var(--bevel-0);
--card-border: var(--border-1);
--card-border-color: var(--border);
--card-shadow: var(--elevation-1);
/* Modal */
--modal-radius: 3;
--modal-elevation: var(--elevation-0);
--modal-overlay: var(--black);
--modal-padding: 2;
--modal-border: var(--spacing-2);
--modal-shadow: var(--modal-elevation);
/* Tooltip */
--dmtooltip: ;
--tooltip-padding: 2;
--tooltip-border: var(--border-1);
--tooltip-shadow: 0;
/* Toast */
--toast-radius: 1;
--toast-padding: 1;
--toast-elevation: var(--elevation-0);
--toast-bevel: var(--bevel-0);
--toast-shadow: var(--elevation-1);
/* Images */
--image-elevation: var(--elevation-0);
--image-radius: 3;
--inline-image-height: 9;
--inline-image-radius: 1;
--image-shadow: var(--image-elevation);
/* Avatars */
--avatar-border: 4;
--avatar-border-lg: 4;
--avatar-elevation: var(--elevation-0);
--avatar-shadow: var(--avatar-elevation);
/* Sliders */
--sliderhandleHeight: 3;
--sliderhandleRadius: 1;
--sliderhandle-shadow: var(--elevation-0);
--sliderbarHeight: 1;
--sliderbar-shadow: None;
/* Popovers */
--popoverRadius: 1;
--popoverElevation: var(--elevation-0);
--popoverBevel: var(--bevel-0);
--popover-shadow: var(--popoverElevation), var(--popoverBevel);
/* Dropdown */
--dropdown-focus-theme: 4px;
--on-dropdown-focus-bg: var(--background);
--on-dropdown-hover-bg: var(--background);
--dropdown-hover-bg: linear-gradient(90deg, var(--button-half) var(--dropdown-focus-theme), var(--transparent) var(--dropdown-focus-theme)) !important;
--dropdown-focus-bg: linear-gradient(90deg, var(--button) var(--dropdown-focus-theme), var(--transparent) var(--dropdown-focus-theme));
/* Section and Paragraph Spacing */
--section-padding: 3;
--p-padding: 2;
/* navbar */
--navbarPrimary-padding: 1;
--navbarSecondary-padding: 1;
--navbarSecondary-stickyTop: 0;
--leftNav: var(--gray-100);
--on-leftNav: var(--on-gray-100);
--leftNavPadding: var(--spacing-2);
/* Hero */
--hero-padding: 3;
--hero-gap: 2;
--hero-justify-content: flex-start;
/* Table */
--tableheaderPadding: 1;
--tablebodyPadding: 1;
/* Core Colors */
--transparent: rgba(0,0,0,0);
--white: rgb(255,255,255);
--white-half: rgba(255, 255, 255, 0.5);
--on-white: var(--black);
--black: rgb(18,18,18);
--black-half: rgba(0,0,0, 0.5);
--nearblack: #181818;
--on-nearblack: #ffffff;
--on-black: #ffffff;
--textLight: var(--white);
--textDark: var(--black);
--gray-0: #fafafa;
--gray-100: #e4e4e4;
--gray-200: #cdcdcd;
--gray-300: #b7b7b7;
--gray-400: #a0a0a0;
--gray-500: #8a8a8a;
--gray-600: #737373;
--gray-700: #5d5d5d;
--gray-800: #464646;
--gray-900: #303030;
--on-gray-0: var(--black);
--on-gray-100: var(--black);
--on-gray-200: var(--black);
--on-gray-300: var(--black);
--on-gray-400: var(--black);
--on-gray-500: var(--white);
--on-gray-600: var(--white);
--on-gray-700: var(--white);
--on-gray-800: var(--white);
--on-gray-900: var(--white);
/* Theme Colors */
--primary: #9C4FCF;
--primary-half: rgba(156,79,207,0.5);
--primary-quarter: rgba(156,79,207,0.25);
--on-primary: #FFFFFF;
--on-primary-half: rgba(255,255,255,0.5);
--on-primary-quarter: rgba(255,255,255,0.25);
--primary-0: #F1E6F8;
--on-primary-0: #121212;
--primary-100: #E0C8F0;
--on-primary-100: #121212;
--primary-200: #D0ABE8;
--on-primary-200: #121212;
--primary-300: #BF8DE0;
--on-primary-300: #121212;
--primary-400: #AE6FD8;
--on-primary-400: #121212;
--primary-500: #9C4FCF;
--on-primary-500: #FFFFFF;
--primary-600: #7B3AAF;
--on-primary-600: #FFFFFF;
--primary-700: #5B2690;
--on-primary-700: #FFFFFF;
--primary-800: #3C1373;
--on-primary-800: #FFFFFF;
--primary-900: #1E0056;
--on-primary-900: #FFFFFF;
--secondary: #358363;
--on-secondary: #FFFFFF;
--secondary-0: #DEF2EC;
--on-secondary-0: #121212;
--secondary-100: #B1E1D2;
--on-secondary-100: #121212;
--secondary-200: #83CFB8;
--on-secondary-200: #121212;
--secondary-300: #53BD9C;
--on-secondary-300: #121212;
--secondary-400: #449F7F;
--on-secondary-400: #121212;
--secondary-500: #358363;
--on-secondary-500: #FFFFFF;
--secondary-600: #266748;
--on-secondary-600: #FFFFFF;
--secondary-700: #194D2F;
--on-secondary-700: #FFFFFF;
--secondary-800: #0C3416;
--on-secondary-800: #FFFFFF;
--secondary-900: #001D00;
--on-secondary-900: #FFFFFF;
--tertiary: #9C4FCF;
--on-tertiary: #FFFFFF;
--tertiary-0: #F1E6F8;
--on-tertiary-0: #121212;
--tertiary-100: #E0C8F0;
--on-tertiary-100: #121212;
--tertiary-200: #D0ABE8;
--on-tertiary-200: #121212;
--tertiary-300: #BF8DE0;
--on-tertiary-300: #121212;
--tertiary-400: #AE6FD8;
--on-tertiary-400: #121212;
--tertiary-500: #9C4FCF;
--on-tertiary-500: #FFFFFF;
--tertiary-600: #7B3AAF;
--on-tertiary-600: #FFFFFF;
--tertiary-700: #5B2690;
--on-tertiary-700: #FFFFFF;
--tertiary-800: #3C1373;
--on-tertiary-800: #FFFFFF;
--tertiary-900: #1E0056;
--on-tertiary-900: #FFFFFF;
--accent: #E0C8F0;
--on-accent: #121212;
--dm-accent: #CCA5E6;
--dm-on-accent: #121212;
--accent-0: #F1E6F8;
--on-accent-0: #121212;
--accent-100: #E0C8F0;
--on-accent-100: #121212;
--accent-200: #D0ABE8;
--on-accent-200: #121212;
--accent-300: #BF8DE0;
--on-accent-300: #121212;
--accent-400: #AE6FD8;
--on-accent-400: #121212;
--accent-500: #9C4FCF;
--on-accent-500: #FFFFFF;
--accent-600: #7B3AAF;
--on-accent-600: #FFFFFF;
--accent-700: #5B2690;
--on-accent-700: #FFFFFF;
--accent-800: #3C1373;
--on-accent-800: #FFFFFF;
--accent-900: #1E0056;
--on-accent-900: #FFFFFF;
/* Gradients */
--gradient-1: linear-gradient(45deg, var(--gradient1-a) 0%, var(--gradient1-b) 100%);
--gradient-2: linear-gradient(45deg, var(--gradient2-a) 0%, var(--gradient2-b) 100%);
--gradient-3: linear-gradient(45deg, var(--gradient3-a) 0%, var(--gradient3-b) 100%);
--gradient-1a: '';
--on-gradient-1: var(--on-gradient1-a);
--on-gradient-2: var(--on-gradient2-a);
--on-gradient-3: var(--on-gradient3-a);
/* Glow Colors */
--white-glow-bright: rgba(255,255,255,1);
--white-glow-dim: rgba(255,255,255,.8);
--white-glow-dimmer: rgba(255,255,255,.5);
/* Border Color */
--border: rgba(0,0,0,0.15);
/* Chips DELETE WE DO NOT NEED */
--chip: rgba(0,0,0,0.25);
--on-chip: var(--black);
/* Chart Coloring */
--line-color: rgba(0,0,0,0.05);
/* Surface */
--surface: var(--white);
--on-surface: var(--black);
/* These are Dark Mode Elevations */
--elevation-bg-0: var(--background);
--on-elevation-bg-0: var(--on-background);
--elevation-bg-1: var(--background);
--on-elevation-bg-1: var(--on-background);
--elevation-bg-2: var(--background);
--on-elevation-bg-2: var(--on-background);
--elevation-bg-3: var(--background);
--on-elevation-bg-3: var(--on-background);
--elevation-bg-4: var(--background);
--on-elevation-bg-4: var(--on-background);
--elevation-bg-5: var(--background);
--on-elevation-bg-5: var(--on-background);
--elevation-bg-6: var(--background);
--on-elevation-bg-6: var(--on-background);
--elevation-bg-7:var(--background);
--on-elevation-bg-7: var(--on-background);
--elevation-bg-8:var(--background);
--on-elevation-bg-8: var(--on-background);
--elevation-bg-9:var(--background);
--on-elevation-bg-9: var(--on-background);
/* elevations (this is just a fix until we update the sdk with --dm-elevation-x )*/
--elevations-bg-0: var(--background);
--on-elevations-bg-0: var(--on-background);
--elevations-bg-1: var(--background);
--on-elevations-bg-1: var(--on-background);
--elevations-bg-2: var(--background);
--on-elevations-bg-2: var(--on-background);
--elevations-bg-3: var(--background);
--on-elevations-bg-3: var(--on-background);
--elevations-bg-4: var(--background);
--on-elevations-bg-4: var(--on-background);
--elevations-bg-5: var(--background);
--on-elevations-bg-5: var(--on-background);
--elevations-bg-6: var(--background);
--on-elevations-bg-6: var(--on-background);
--elevations-bg-7:var(--background);
--on-elevations-bg-7: var(--on-background);
--elevations-bg-8:var(--background);
--on-elevations-bg-8: var(--on-background);
--elevations-bg-9:var(--background);
--on-elevations-bg-9: var(--on-background);
/* Gradients */
--gradient1-a: #F1E6F8;
--on-gradient1-a: #121212;
--gradient1-b: #E0C8F0;
--on-gradient1-b: #121212;
--gradient2-a: #B4D2FA;
--on-gradient2-a: #121212;
--gradient2-b: #8AB9F8;
--on-gradient2-b: #121212;
--gradient3-a: var(--gray-0);
--on-gradient3-a: var(--black);
--gradient3-b: var(--gray-200);
--on-gradient3-b: var(--black);
/* Backgrounds */
--background: #FCF9FD;
--background-secondary: #F8F3FC;
--alt-background: var(--background-secondary);
--on-background: var(--black);
--primaryDarkBG: var(--black);
--secondaryDarkBG: var(--black);
--on-background-secondary: var(--on-gray-0);
--background-tertiary: var(--primary);
--on-background-tertiary: var(--on-primary);
--primaryDarkBG: var(--black);
--secondaryDarkBG: var(--nearblack);
/* Button Coloring */
--button: var(--primary-500);
--on-button: #FFFFFF;
--button-half: rgba(0,102,239,0.5);
/* overlays */
--color-1: var(--background);
--color-2: var(--background);
/* glows */
--glow-1: 0 0 var(--glow-blur) var(--glow-spread) rgba(var(--glow-rgb), var(--glow-opacity) );
--glow-2: 0 0 var(--glow-blur) var(--glow-spread) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 1))) );
--glow-3: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 2))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 2))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 2))) );
--glow-4: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 3))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 3))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 3))) );
--glow-5: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 4))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 4))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 4))) );
--glow-6: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 5))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 5))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 5))) );
--glow-7: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 6))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 6))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 6))) );
--glow-8: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 7))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 7))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 7))) );
--glow-9: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 8))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 8))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 8))) );
/* bevel */
--bevel-1: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 1)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 1)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 1))));
--bevel-2: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 2)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 2)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 2))));
--bevel-3: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 3)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 3)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 3)))) var(--bevel-blur) var(--bevel-spread)
rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 3))));
--bevel-4: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 4)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 4)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 4)))) var(--bevel-blur) var(--bevel-spread)
rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 4))));
--bevel-5: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 5)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 5)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 5)))) var(--bevel-blur) var(--bevel-spread)
rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 5))));
--bevel-6: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 6)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 6)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 6)))) var(--bevel-blur) var(--bevel-spread)
rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 6))));
--bevel-7: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 7)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 7)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 7)))) var(--bevel-blur) var(--bevel-spread)
rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 7))));
--bevel-8: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 8)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 8)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 8)))) var(--bevel-blur) var(--bevel-spread)
rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 8))));
--bevel-9:
inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 9)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 9)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 9)))) var(--bevel-blur) var(--bevel-spread)
rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 9))));
/* reverse bevel */
--reverse-bevel-1: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 1)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 1)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 1))));
--reverse-bevel-2: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 2)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 2)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
rgba(255,255,255 ,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 2))));
--reverse-bevel-3: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 3)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 3)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 3)))) var(--bevel-blur) var(--bevel-spread)
rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 3))));
--reverse-bevel-4: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 4)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 4)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 4)))) var(--bevel-blur) var(--bevel-spread)
rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 4))));
--reverse-bevel-5: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 5)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 5)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 5)))) var(--bevel-blur) var(--bevel-spread)
rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 5))));
--reverse-bevel-6: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 6)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 6)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 6)))) var(--bevel-blur) var(--bevel-spread)
rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 6))));
--reverse-bevel-7: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 7)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 7)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 7)))) var(--bevel-blur) var(--bevel-spread)
rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 7))));
--reverse-bevel-8: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 8)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 8)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 8)))) var(--bevel-blur) var(--bevel-spread)
rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 8))));
--reverse-bevel-9: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 9)))),
inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 9)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 9)))) var(--bevel-blur) var(--bevel-spread)
rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 9))));
/* Ridges */
--ridge: 2px;
--ridge-1: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2), inset 1px 1px 1px 1px rgba(0,0,0,.3),
calc(0px - var(--ridge)) calc(0px - var(--ridge)) var(--ridge) var(--ridge) var(--white-glow-dim),
calc(var(--ridge) * 1) calc(var(--ridge) * 1) calc(var(--ridge) * 1) calc(var(--ridge) * 1) rgba(0,0,0,.3),
0px 0px 0px var(--ridge) var(--white-glow-bright);
--ridge-2: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2), inset 1.5px 1.5px 1px 1px rgba(0,0,0,.3),
calc(0px - calc(var(--ridge) * var(--change-2))) calc(0px - calc(var(--ridge) * var(--change-2))) var(--ridge) var(--ridge) var(--white-glow-dim),
calc(var(--ridge) * var(--change-2)) calc(var(--ridge) * var(--change-2)) calc(var(--ridge) * var(--change-2)) calc(var(--ridge) * var(--change-2)) rgba(0,0,0,.3),
0px 0px 0px calc(var(--ridge) * var(--change-2)) var(--white-glow-bright);
--ridge-3: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2), 1px 1px 0 0 var(--white-glow-dim),
inset 1px 1px 0 0 rgba(0,0,0,.2),
inset calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1))
rgba(0,0,0,.3),
calc(0px - calc(var(--ridge) * var(--change-3))) calc(0px - calc(var(--ridge) * var(--change-3))) var(--ridge) var(--ridge) var(--white-glow-dim),
calc(var(--ridge) * var(--change-3)) calc(var(--ridge) * var(--change-3)) calc(var(--ridge) * var(--change-3)) calc(var(--elevation-spread) * var(--change-3)) rgba(0,0,0,.3),
0px 0px 0px calc(var(--ridge) * var(--change-3)) var(--white-glow-bright);
--ridge-4: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
inset calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2))
rgba(0,0,0,.3),
calc(0px - calc(var(--ridge) * var(--change-4))) calc(0px - calc(var(--ridge) * var(--change-4))) var(--ridge) var(--ridge) var(--white-glow-dim),
calc(var(--ridge) * var(--change-4)) calc(var(--ridge) * var(--change-4)) calc(var(--ridge) * var(--change-4)) calc(var(--ridge) * var(--change-4)) rgba(0,0,0,.3),
0px 0px 0px calc(var(--ridge) * var(--change-4)) var(--white-glow-bright);
--ridge-5: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
inset calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3))
rgba(0,0,0,.3),
calc(0px - calc(var(--ridge) * var(--change-5))) calc(0px - calc(var(--ridge) * var(--change-5))) var(--ridge) var(--ridge) var(--white-glow-dim),
calc(var(--ridge) * var(--change-5)) calc(var(--ridge) * var(--change-5)) calc(var(--ridge) * var(--change-5)) calc(var(--ridge) * var(--change-5)) rgba(0,0,0,.3),
0px 0px 0px calc(var(--ridge) * var(--change-5)) var(--white-glow-bright);
--ridge-6: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
inset calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4))
rgba(0,0,0,.3),
calc(0px - calc(var(--ridge) * var(--change-6))) calc(0px - calc(var(--ridge) * var(--change-6))) var(--ridge) var(--ridge) var(--white-glow-dim),
calc(var(--ridge) * var(--change-6)) calc(var(--ridge) * var(--change-6)) calc(var(--ridge) * var(--change-6)) calc(var(--ridge) * var(--change-6)) rgba(0,0,0,.3),
0px 0px 0px calc(var(--ridge) * var(--change-6)) var(--white-glow-bright);
--ridge-7: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
inset calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5))
rgba(0,0,0,.3),
calc(0px - calc(var(--ridge) * var(--change-7))) calc(0px - calc(var(--ridge) * var(--change-7))) var(--ridge) var(--ridge) var(--white-glow-dim),
calc(var(--ridge) * var(--change-7)) calc(var(--ridge) * var(--change-9)) calc(var(--ridge) * var(--change-7)) calc(var(--ridge) * var(--change-7)) rgba(0,0,0,.3),
0px 0px 0px calc(var(--ridge) * var(--change-7)) var(--white-glow-bright);
--ridge-8: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
inset calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6))
rgba(0,0,0,.3),
calc(0px - calc(var(--ridge) * var(--change-8))) calc(0px - calc(var(--ridge) * var(--change-8))) var(--ridge) var(--ridge) var(--white-glow-dim),
calc(var(--ridge) * var(--change-8)) calc(var(--ridge) * var(--change-8)) calc(var(--ridge) * var(--change-8)) calc(var(--ridge) * var(--change-8)) rgba(0,0,0,.3),
calc(0px - calc(var(--ridge) * var(--change-8))) calc(var(--ridge) * var(--change-8)) var(--ridge) var(--ridge) rgba(0,0,0,.08),
calc(var(--ridge) * var(--change-8)) calc(0px - calc(var(--ridge) * var(--change-8))) var(--ridge) var(--ridge) rgba(0,0,0,.08),
0px 0px 0px calc(var(--ridge) * var(--change-8)) var(--white-glow-bright);
--ridge-9: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
inset calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7))
rgba(0,0,0,.3),
calc(0px - calc(var(--ridge) * var(--change-9))) calc(0px - calc(var(--ridge) * var(--change-9))) var(--ridge) var(--ridge) var(--white-glow-dim),
calc(var(--ridge) * var(--change-9)) calc(var(--ridge) * var(--change-9)) calc(var(--ridge) * var(--change-9)) calc(var(--ridge) * var(--change-9)) rgba(0,0,0,.3),
calc(0px - calc(var(--ridge) * var(--change-9))) calc(var(--ridge) * var(--change-9)) var(--ridge) var(--ridge) rgba(0,0,0,.08),
calc(var(--ridge) * var(--change-9)) calc(0px - calc(var(--ridge) * var(--change-9))) var(--ridge) var(--ridge) rgba(0,0,0,.08),
0px 0px 0px calc(var(--ridge) * var(--change-9)) var(--white-glow-bright);
/* Groove Shadows */
--groove-1: -1px -1px 0 0 var(--white-glow-dimmer), 1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-1),
calc(0px - calc(var(--elevation-horizontal) * 1)) calc(0px - calc(var(--elevation-vertical) * 1)) calc(var(--elevation-blur) * 1) calc(var(--elevation-spread) * 1) rgba(0,0,0,.3),
calc(var(--elevation-horizontal) * 1) calc(var(--elevation-vertical) * 1) calc(var(--elevation-blur) * 1) calc(var(--elevation-spread) * 1) var(--white-glow-dim),
calc(0px - calc(var(--elevation-horizontal) * 1)) calc(var(--elevation-vertical) * 1) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
calc(var(--elevation-horizontal) * 1) calc(0px - calc(var(--elevation-vertical) * 1)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
--groove-2: -1px -1px 0 0 var(--white-glow-dimmer), 1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-2),
calc(0px - calc(var(--elevation-horizontal) * var(--change-2))) calc(0px - calc(var(--elevation-vertical) * var(--change-2))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
calc(var(--elevation-horizontal) * var(--change-2)) calc(var(--elevation-vertical) * var(--change-2)) calc(var(--elevation-blur) * var(--change-2)) calc(var(--elevation-spread) * var(--change-2)) var(--white-glow-dim),
calc(0px - calc(var(--elevation-horizontal) * var(--change-2))) calc(var(--elevation-vertical) * var(--change-2)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
calc(var(--elevation-horizontal) * var(--change-2)) calc(0px - calc(var(--elevation-vertical) * var(--change-2))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
--groove-3: -1px -1px 0 0 var(--white-glow-dimmer), 1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-3),
calc(0px - calc(var(--elevation-horizontal) * var(--change-3))) calc(0px - calc(var(--elevation-vertical) * var(--change-3))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
calc(var(--elevation-horizontal) * var(--change-3)) calc(var(--elevation-vertical) * var(--change-3)) calc(var(--elevation-blur) * var(--change-3)) calc(var(--elevation-spread) * var(--change-3)) var(--white-glow-dim),
calc(0px - calc(var(--elevation-horizontal) * var(--change-3))) calc(var(--elevation-vertical) * var(--change-3)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
calc(var(--elevation-horizontal) * var(--change-3)) calc(0px - calc(var(--elevation-vertical) * var(--change-3))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
--groove-4: -1px -1px 0 0 var(--white-glow-dimmer), 1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-4),
calc(0px - calc(var(--elevation-horizontal) * var(--change-4))) calc(0px - calc(var(--elevation-vertical) * var(--change-4))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
calc(var(--elevation-horizontal) * var(--change-4)) calc(var(--elevation-vertical) * var(--change-4)) calc(var(--elevation-blur) * var(--change-4)) calc(var(--elevation-spread) * var(--change-4)) var(--white-glow-dim),
calc(0px - calc(var(--elevation-horizontal) * var(--change-4))) calc(var(--elevation-vertical) * var(--change-4)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
calc(var(--elevation-horizontal) * var(--change-4)) calc(0px - calc(var(--elevation-vertical) * var(--change-4))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
--groove-5: -1px -1px 0 0 var(--white-glow-dimmer), 1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-5),
calc(0px - calc(var(--elevation-horizontal) * var(--change-5))) calc(0px - calc(var(--elevation-vertical) * var(--change-5))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
calc(var(--elevation-horizontal) * var(--change-5)) calc(var(--elevation-vertical) * var(--change-5)) calc(var(--elevation-blur) * var(--change-5)) calc(var(--elevation-spread) * var(--change-5)) var(--white-glow-dim),
calc(0px - calc(var(--elevation-horizontal) * var(--change-5))) calc(var(--elevation-vertical) * var(--change-5)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
calc(var(--elevation-horizontal) * var(--change-5)) calc(0px - calc(var(--elevation-vertical) * var(--change-5))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
--groove-6: -1px -1px 0 0 var(--white-glow-dimmer), 1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-6),
calc(0px - calc(var(--elevation-horizontal) * var(--change-6))) calc(0px - calc(var(--elevation-vertical) * var(--change-6))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
calc(var(--elevation-horizontal) * var(--change-6)) calc(var(--elevation-vertical) * var(--change-6)) calc(var(--elevation-blur) * var(--change-6)) calc(var(--elevation-spread) * var(--change-6)) var(--white-glow-dim);
--groove-7: -1px -1px 0 0 var(--white-glow-dimmer), 1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-7),
calc(0px - calc(var(--elevation-horizontal) * var(--change-7))) calc(0px - calc(var(--elevation-vertical) * var(--change-7))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
calc(var(--elevation-horizontal) * var(--change-7)) calc(var(--elevation-vertical) * var(--change-7)) calc(var(--elevation-blur) * var(--change-7)) calc(var(--elevation-spread) * var(--change-7)) var(--white-glow-dim),
calc(0px - calc(var(--elevation-horizontal) * var(--change-7))) calc(var(--elevation-vertical) * var(--change-7)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
calc(var(--elevation-horizontal) * var(--change-7)) calc(0px - calc(var(--elevation-vertical) * var(--change-7))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
--groove-8: -1px -1px 0 0 var(--white-glow-dimmer), 1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-8),
calc(0px - calc(var(--elevation-horizontal) * var(--change-8))) calc(0px - calc(var(--elevation-vertical) * var(--change-8))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
calc(var(--elevation-horizontal) * var(--change-8)) calc(var(--elevation-vertical) * var(--change-8)) var(--elevation-blur) var(--elevation-spread) var(--white-glow-dim),
calc(0px - calc(var(--elevation-horizontal) * var(--change-8))) calc(var(--elevation-vertical) * var(--change-8)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
calc(var(--elevation-horizontal) * var(--change-8)) calc(0px - calc(var(--elevation-vertical) * var(--change-8))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
--groove-9: -1px -1px 0 0 var(--white-glow-dimmer), 1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-9),
calc(0px - calc(var(--elevation-horizontal) * var(--change-9))) calc(0px - calc(var(--elevation-vertical) * var(--change-9))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3),
calc(var(--elevation-horizontal) * var(--change-9)) calc(var(--elevation-vertical) * var(--change-9)) var(--elevation-blur) var(--elevation-spread) var(--white-glow-dim),
calc(0px - calc(var(--elevation-horizontal) * var(--change-9))) calc(var(--elevation-vertical) * var(--change-9)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
calc(var(--elevation-horizontal) * var(--change-9)) calc(0px - calc(var(--elevation-vertical) * var(--change-9))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
/* recessed */
--recessed-1: inset 1px 1px 0 0 rgba(0,0,0,.2), inset 1px 1px 1px 1px rgba(0,0,0,.3);
--recessed-2: inset 1px 1px 0 0 rgba(0,0,0,.2), inset 1.5px 1.5px 1px 1px rgba(0,0,0,.3);
--recessed-3: inset calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1))
calc(1.5px * calc(1 + var(--bevel-change) * 1)) rgba(0,0,0,.3);
--recessed-4: inset calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2))
calc(1.5px * calc(1 + var(--bevel-change) * 2)) rgba(0,0,0,.3);
--recessed-5: inset calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3))
calc(1.5px * calc(1 + var(--bevel-change) * 3)) rgba(0,0,0,.3);
--recessed-6: inset calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4))
calc(1.5px * calc(1 + var(--bevel-change) * 4)) rgba(0,0,0,.3);
--recessed-7: inset calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5))
calc(1.5px * calc(1 + var(--bevel-change) * 5)) rgba(0,0,0,.3);
--recessed-8: inset calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6))
calc(1.5px * calc(1 + var(--bevel-change) * 6)) rgba(0,0,0,.3);
--recessed-9: inset calc(1.5px * calc(1 + var(--bevel-change) * 8)) calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7))
calc(1.5px * calc(1 + var(--bevel-change) * 7)) rgba(0,0,0,.3);
/* Button variations based on background color */
--buttonOnWhite: var(--primary-500);
--onbuttonOnWhite: #FFFFFF;
--buttonHalfOnWhite: var(--primary-500);
--buttonOnBlack: var(--primary-500);
--onbuttonOnBlack: #FFFFFF;
--buttonHalfOnBlack: var(--primary-500);
--buttonOnTertiary: var(--white);
--onbuttonOnTertiary: #121212;
--buttonHalfOnTertiary: rgba(255,255,255,0.5);
--buttonOnGradient1: #121212;
--onbuttonOnGradient1: var(--white);
--buttonHalfOnGradient1: rgba(18,18,18,0.5);
--buttonOnGradient2: #121212;
--onbuttonOnGradient2: var(--white);
--buttonHalfOnGradient2: rgba(18,18,18,0.5);
--buttonOnGradient3: #121212;
--onbuttonOnGradient3: #FFFFFF;
--buttonHalfOnGradient3: rgba(18,18,18,0.5);
/* Icons */
--icon: var(--primary-500);
--on-icon: #FFFFFF;
--icon-half: rgba(156,79,207,0.5);
/* Icon variations based on background color */
--iconOnWhite: var(--secondary-500);
--oniconOnWhite: #FFFFFF;
--iconHalfOnWhite: var(--secondary-500);
--iconOnBlack: var(--secondary-500);
--oniconOnBlack: #FFFFFF;
--iconHalfOnBlack: var(--secondary-500);
--iconOnTertiary: #FFFFFF;
--oniconOnTertiary: #121212;
--iconHalfOnTertiary: rgba(0,0,0,0.5);
--iconOnGradient1: #121212;
--oniconOnGradient1: var(--white);
--iconHalfOnGradient1: rgba(18,18,18,0.5);
--iconOnGradient2: #121212;
--oniconOnGradient2: var(--white);
--iconHalfOnGradient2: rgba(18,18,18,0.5);
--iconOnGradient3: #121212;
--oniconOnGradient3: #FFFFFF;
--oniconHalfOnGradient3: rgba(0,0,0,0.5);
/* Hotlinks */
--hotlink: #0066EF;
--hotlink-visited: rgba(0,102,239,0.9);
--hotlink-decoration: underline;
--hotlink-hover-decoration: none;
/* Hotlink variations based on background color */
--hotlinkOnWhite: #0066EF;
--hotlinkOnWhite-visited: rgba(0,102,239,0.9);
--hotlinkOnWhite-decoration: none;
--hotlinkOnWhite-hover-decoration: underline;
--hotlinkOnBlack: #0066EF;
--hotlinkOnBlack-visited: rgba(0,102,239,0.9);
--hotlinkOnBlack-decoration: none;
--hotlinkOnBlack-hover-decoration: underline;
--hotlinkOnTertiary: #FFFFFF;
--hotlinkOnTertiary-visited: rgba(255,255,255,0.8);
--hotlinkOnTertiary-decoration: none;
--hotlinkOnTertiary-hover-decoration: underline;
--hotlinkOnGradient3: #121212;
--hotlinkOnGradient3-visited: rgba(0,0,0,0.5);
/* Text Decorations */
--text-gradient: linear-gradient(45deg, var(--text-gradient-a) 0%, var(--text-gradient-b) 100%);
--text-gradient-a: #9C4FCF;
--text-gradient-b: #0066EF;
/* Input */
--input: rgba(254,252,254,0.55);
--on-input: #121212;
--primary-input: var(--input);
--primary-on-input: var(--on-input);
/* Primary background */
--primary-background: var(--background) !important;
--primary-alt-background: var(--alt-background) !important;
--primary-on-background: var(--on-background) !important;
/* Button */
--primary-button: var(--button);
--primary-on-button: var(--on-button);
--primary-button-half: var(--button-half);
/* Icons */
--primary-icon: var(--icon);
--primary-on-icon: var(--on-icon);
--primary-icon-half: var(--icon-half);
/* Hotlink */
--primary-hotlink: var(--hotlink);
--primary-hotlink-decoration: var(--hotlink-decoration);
--primary-hotlink-hover-decoration: var(--hotlink-hover-decoration);
/* Light Mode (hacck until we update the sdk ) */
--lm-body-bg: var(--white);
--lm-white: var(--white);
--lm-on-white: var(--on-white);
--lm-on-black: var(--on-black);
--lm-nearblack: var(--nearblack);
--lm-on-nearblack: var(--on-nearblack);
--lm-textLight: var(--textLight);
--lm-textDark: var(--textDark);
--lm-gray-0: var(--gray-0);
--lm-gray-100: var(--gray-100);
--lm-gray-200: var(--gray-200);
--lm-gray-300: var(--gray-300);
--lm-gray-400: var(--gray-400);
--lm-gray-500: var(--gray-500);