1  :root {
  2    --color-primary: #5555ff;
  3    --color-primary-level-1: #e2e2ff;
  4    --color-primary-level-2: #c0c0ff;
  5    --color-primary-level-6: #313166;
  6    --color-positive: #53db53;
  7    --color-positive-level-1: #e3ffe3;
  8    --color-positive-level-2: #b5ffb5;
  9    --color-positive-level-6: #569656;
 10    --color-caution: #ffc555;
 11    --color-caution-level-1: #fff6e5;
 12    --color-caution-level-2: #ffe5b2;
 13    --color-caution-level-6: #b27805;
 14    --color-negative: #ff5555;
 15    --color-negative-level-1: #ffeded;
 16    --color-negative-level-2: #ff8787;
 17    --color-negative-level-6: #803d3d;
 18    --color-foreground: #28333d;
 19    --color-foreground-level-1: #f8f8f8;
 20    --color-foreground-level-2: #ebeff3;
 21    --color-foreground-level-3: #c5d1db;
 22    --color-foreground-level-4: #a9b9c7;
 23    --color-foreground-level-5: #90a0af;
 24    --color-foreground-level-6: #546474;
 25    --color-background: #ffffff;
 26  }
 27  
 28  [data-theme='dark'] {
 29    --color-primary: #5555ff;
 30    --color-primary-level-1: #212847;
 31    --color-primary-level-2: #2c326d;
 32    --color-primary-level-6: #e3e3ff;
 33    --color-positive: #53db53;
 34    --color-positive-level-1: #21402f;
 35    --color-positive-level-2: #2c6837;
 36    --color-positive-level-6: #e3ffe3;
 37    --color-caution: #ffc555;
 38    --color-caution-level-1: #2f312d;
 39    --color-caution-level-2: #524a34;
 40    --color-caution-level-6: #ffefcf;
 41    --color-negative: #ff5555;
 42    --color-negative-level-1: #38282f;
 43    --color-negative-level-2: #623237;
 44    --color-negative-level-6: #ffd4d4;
 45    --color-foreground: #ffffff;
 46    --color-foreground-level-1: #162029;
 47    --color-foreground-level-2: #29343d;
 48    --color-foreground-level-3: #333e47;
 49    --color-foreground-level-4: #5e6d7a;
 50    --color-foreground-level-5: #8594a1;
 51    --color-foreground-level-6: #d3dee8;
 52    --color-background: #0e171f;
 53  }
 54  
 55  [data-theme='h4x0r'] {
 56    --color-primary: #ffa755;
 57    --color-primary-level-1: #473728;
 58    --color-primary-level-2: #6d4f32;
 59    --color-primary-level-6: #fff4ea;
 60    --color-positive: #53db53;
 61    --color-positive-level-1: #224021;
 62    --color-positive-level-2: #2e682c;
 63    --color-positive-level-6: #e3ffe3;
 64    --color-caution: #ffc555;
 65    --color-caution-level-1: #2c1e00;
 66    --color-caution-level-2: #644b19;
 67    --color-caution-level-6: #ffe4af;
 68    --color-negative: #ff0000;
 69    --color-negative-level-1: #2e0000;
 70    --color-negative-level-2: #570000;
 71    --color-negative-level-6: #ffb3b3;
 72    --color-foreground: #15ff00;
 73    --color-foreground-level-1: #031e01;
 74    --color-foreground-level-2: #0b3607;
 75    --color-foreground-level-3: #0e7305;
 76    --color-foreground-level-4: #0fb200;
 77    --color-foreground-level-5: #81f976;
 78    --color-foreground-level-6: #c0ffba;
 79    --color-background: #021400;
 80  }
 81  
 82  [data-primary-color='blue'] {
 83    --color-primary: #5555ff;
 84    --color-primary-level-1: #e2e2ff;
 85    --color-primary-level-2: #c0c0ff;
 86    --color-primary-level-6: #313166;
 87  }
 88  
 89  [data-primary-color='blue'][data-theme='dark'] {
 90    --color-primary: #5555ff;
 91    --color-primary-level-1: #212847;
 92    --color-primary-level-2: #2c326d;
 93    --color-primary-level-6: #e3e3ff;
 94  }
 95  
 96  [data-primary-color='pink'] {
 97    --color-primary: #ff55ff;
 98    --color-primary-level-1: #ffe2ff;
 99    --color-primary-level-2: #ffbfff;
100    --color-primary-level-6: #ff6bff;
101  }
102  
103  [data-primary-color='pink'][data-theme='dark'] {
104    --color-primary: #ff55ff;
105    --color-primary-level-1: #431643;
106    --color-primary-level-2: #6d246d;
107    --color-primary-level-6: #ffceff;
108  }
109  
110  [data-primary-color='orange'] {
111    --color-primary: #ff7b00;
112    --color-primary-level-1: #ffe9d5;
113    --color-primary-level-2: #ffcea1;
114    --color-primary-level-6: #ff8c21;
115  }
116  
117  [data-primary-color='orange'][data-theme='dark'] {
118    --color-primary: #ff7b00;
119    --color-primary-level-1: #422000;
120    --color-primary-level-2: #783a00;
121    --color-primary-level-6: #ffd2a8;
122  }
123  
124  [data-primary-color='red'] {
125    --color-primary: #ff0420;
126    --color-primary-level-1: #ffb0b9;
127    --color-primary-level-2: #ff7484;
128    --color-primary-level-6: #ff223b;
129  }
130  
131  [data-primary-color='red'][data-theme='dark'] {
132    --color-primary: #ff0420;
133    --color-primary-level-1: #5b000a;
134    --color-primary-level-2: #aa0013;
135    --color-primary-level-6: #ffa1aa;
136  }