:root.theme-tradeart-light,
.theme-tradeart-light {
  --piccolo: 0 0 0; /* #000000 */
  --hit: 194 199 205; /* #c2c7cd */
  --beerus: 235 235 235; /* #ebebeb */
  --gohan: 247 247 247; /* #f7f7f7 */
  --goten: 255 255 255; /* #ffffff */
  --goku: 255 255 255; /* #ffffff; */
  --bulma: 0 0 0; /* #000000 */
  --trunks: 112 112 112; /* #707070 */
  --popo: 0 0 0; /* #000000 */
  --jiren: 0 0 0 / 0.06; /* #000000 */
  --heles: 0 0 0 / 0.08; /* #000000 */
  --zeno: 0 0 0 / 0.56; /* #000000 */

  /* support-colors  */
  --krillin: 255 149 25; /* #ff9519 */
  --krillin-60: 255 192 117; /* #ffc075 */
  --krillin-10: 255 245 232; /* #fff5e8 */

  --chichi: 255 78 100; /* #ff4e64 */
  --chichi-60: 255 118 135; /* #ff7687 */
  --chichi-10: 255 150 163; /* #ff96a3 */

  --roshi: 74 209 95; /* #4ad15f */
  --roshi-60: 100 220 119; /* #64dc77 */
  --roshi-10: 127 242 145; /* #7ff291 */

  --dodoria: 203 68 45; /* #cb442d */
  --dodoria-60: 219 78 78; /* #db4e4e */
  --dodoria-10: 253 233 229; /* #fde9e5 */

  --cell: 31 128 103; /* #1f8067 */
  --cell-60: 40 176 144; /* #28b090 */
  --cell-10: 224 241 237; /* #e0f1ed */

  --raditz: 192 152 5; /* #c09805 */
  --raditz-60: 221 175 6; /* #ddaf06 */
  --raditz-10: 254 237 175; /* #feedaf */

  --whis: 52 72 240; /* #3448f0 */
  --whis-60: 67 115 181; /* #4373b5 */
  --whis-10: 228 239 254; /* #e4effe */

  --frieza: 92 51 207; /* #5c33cf */
  --frieza-60: 110 103 190; /* #6e67be */
  --frieza-10: 238 236 248; /* #eeecf8 */

  --nappa: 114 85 80; /* #725550 */
  --nappa-60: 133 106 102; /* #856a66 */
  --nappa-10: 161 134 129; /* #a18681 */

  /* border-radius */
  --radius-i-xs: 0.25rem; /* 4px */
  --radius-i-sm: 0.5rem; /* 8px */
  --radius-i-md: 0.75rem; /* 12px */
  --radius-s-xs: 0.25rem; /* 4px */
  --radius-s-sm: 0.5rem; /* 8px */
  --radius-s-md: 0.75rem; /* 12px */
  --radius-s-lg: 1rem; /* 16px */

  /* border-width */
  --border-width: 0.0625rem; /* 1px */
  --border-i-width: 0.125rem; /* 2px */

  /* opacity */
  --opacity-moon: 0.6;

  /* fonts */
  --averta: 'Averta Std';
  --dm-sans: 'DM Sans';

  /* box-shadow */
  --shadow-xs: 0 4px 12px -6px rgb(0 0 0 / 0.06);
  --shadow-sm: 0 6px 6px -6px rgb(0 0 0 / 0.16), 0 0 1px rgb(0 0 0 / 0.4);
  --shadow-md: 0 12px 12px -6px rgb(0 0 0 / 0.16), 0 0 1px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 8px 24px -6px rgb(0 0 0 / 0.16), 0 0 1px rgb(0 0 0 / 0.4);
  --shadow-xl: 0 32px 32px -8px rgb(0 0 0 / 0.08),
    0 0 32px -8px rgb(0 0 0 / 0.12), 0 0 1px rgb(0 0 0 / 0.2);
}

:root.theme-tradeart-dark,
.theme-tradeart-dark {
  --piccolo: 0 0 0; /* #000000 */
  --hit: 194 199 205; /* #c2c7cd */
  --beerus: 235 235 235; /* #ebebeb */
  --goku: 247 247 247; /* #f7f7f7 */
  --gohan: 255 255 255; /* #ffffff; */
  --bulma: 0 0 0; /* #000000 */
  --trunks: 112 112 112; /* #707070 */
  --goten: 255 255 255; /* #ffffff */
  --popo: 0 0 0; /* #000000 */
  --jiren: 0 0 0 / 0.06; /* #000000 */
  --heles: 0 0 0 / 0.08; /* #000000 */
  --zeno: 0 0 0 / 0.56; /* #000000 */

  /* support-colors  */
  --krillin: 255 149 25; /* #ff9519 */
  --krillin-60: 255 192 117; /* #ffc075 */
  --krillin-10: 255 245 232; /* #fff5e8 */

  --chichi: 255 78 100; /* #ff4e64 */
  --chichi-60: 255 118 135; /* #ff7687 */
  --chichi-10: 255 150 163; /* #ff96a3 */

  --roshi: 74 209 95; /* #4ad15f */
  --roshi-60: 100 220 119; /* #64dc77 */
  --roshi-10: 127 242 145; /* #7ff291 */

  --dodoria: 203 68 45; /* #cb442d */
  --dodoria-60: 219 78 78; /* #db4e4e */
  --dodoria-10: 253 233 229; /* #fde9e5 */

  --cell: 31 128 103; /* #1f8067 */
  --cell-60: 40 176 144; /* #28b090 */
  --cell-10: 224 241 237; /* #e0f1ed */

  --raditz: 192 152 5; /* #c09805 */
  --raditz-60: 221 175 6; /* #ddaf06 */
  --raditz-10: 254 237 175; /* #feedaf */

  --whis: 52 72 240; /* #3448f0 */
  --whis-60: 67 115 181; /* #4373b5 */
  --whis-10: 228 239 254; /* #e4effe */

  --frieza: 92 51 207; /* #5c33cf */
  --frieza-60: 110 103 190; /* #6e67be */
  --frieza-10: 238 236 248; /* #eeecf8 */

  --nappa: 114 85 80; /* #725550 */
  --nappa-60: 133 106 102; /* #856a66 */
  --nappa-10: 161 134 129; /* #a18681 */

  /* border-radius */
  --radius-i-xs: 0.25rem; /* 4px */
  --radius-i-sm: 0.5rem; /* 8px */
  --radius-i-md: 0.75rem; /* 12px */
  --radius-s-xs: 0.25rem; /* 4px */
  --radius-s-sm: 0.5rem; /* 8px */
  --radius-s-md: 0.75rem; /* 12px */
  --radius-s-lg: 1rem; /* 16px */

  /* border-width */
  --border-width: 0.0625rem; /* 1px */
  --border-i-width: 0.125rem; /* 2px */

  /* opacity */
  --opacity-moon: 0.6;

  /* fonts */
  --averta: 'Averta Std';
  --dm-sans: 'DM Sans';

  /* box-shadow */
  --shadow-xs: 0 4px 12px -6px rgb(0 0 0 / 0.64);
  --shadow-sm: 0 6px 6px -6px rgb(0 0 0 / 0.64), 0 0 1px rgb(0 0 0 / 0.56);
  --shadow-md: 0 12px 12px -6px rgb(0 0 0 / 0.64), 0 0 1px rgb(0 0 0 / 0.56);
  --shadow-lg: 0 24px 24px -6px rgb(0 0 0 / 0.64), 0 0 1px rgb(0 0 0 / 0.56);
  --shadow-xl: 0 48px 48px -6px rgb(0 0 0 / 0.88), 0 0 1px rgb(0 0 0 / 0.72);
}