:root.theme-sb-light,
:root,
.theme-sb-light {
  --piccolo: 73 179 86; /* #49b356 */
  --hit: 234 235 235; /* #eaebeb */
  --beerus: 224 227 229; /* #e0e3e5 */
  --gohan: 244 245 246; /* #f4f5f6 */
  --goten: 255 255 255; /* #ffffff */
  --goku: 255 255 255; /* #ffffff */
  --bulma: 26 33 42; /* #1a212a */
  --trunks: 99 113 123; /* #63717b */
  --popo: 0 0 0; /* #000000 */
  --jiren: 73 179 86 / 0.12; /* #49b356 */
  --heles: 55 61 69 / 0.08; /* #373d45 */
  --zeno: 80 86 95 / 0.56; /* #50565F8F */

  /* support-colors  */
  --krillin: 248 193 0; /* #f8c100 */
  --krillin-60: 248 193 0 / 0.56; /* #f8c100 */
  --krillin-10: 248 193 0 / 0.12; /* #f8c100 */

  --chichi: 255 78 100; /* #ff4e64 */
  --chichi-60: 255 78 100 / 0.56; /* #ff4e64 */
  --chichi-10: 255 78 100 / 0.12; /* #ff4e64 */

  --roshi: 12 214 100; /* #0CD664 */
  --roshi-60: 12 214 100 / 0.56; /* #0CD664 */
  --roshi-10: 12 214 100 / 0.12; /* #0CD664 */

  --dodoria: 255 138 1; /* #FF8A01 */
  --dodoria-60: 255 138 1 / 0.56; /* #FF8A01 */
  --dodoria-10: 255 138 1 / 0.12; /* #FF8A01 */

  --cell: 27 210 154; /* #1bd29a */
  --cell-60: 27 210 154 / 0.56; /* #1bd29a */
  --cell-10: 27 210 154 / 0.12; /* #1bd29a */

  --raditz: 179 128 74; /* #b3804a */
  --raditz-60: 179 128 74 / 0.56; /* #b3804a */
  --raditz-10: 179 128 74 / 0.12; /* #b3804a */

  --whis: 46 105 255; /* #2e69ff */
  --whis-60: 46 105 255 / 0.56; /* #2e69ff */
  --whis-10: 46 105 255 / 0.12; /* #2e69ff */

  --frieza: 111 59 255; /* #6f3bff */
  --frieza-60: 111 59 255 / 0.56; /* #6f3bff */
  --frieza-10: 111 59 255 / 0.12; /* #6f3bff */

  --nappa: 0 142 173; /* #008ead */
  --nappa-60: 0 142 173 / 0.56; /* #008ead */
  --nappa-10: 0 142 173 / 0.12; /* #008ead */

  /* 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-sb-dark,
.theme-sb-dark {
  --piccolo: 73 179 86; /* #49B356 */
  --hit: 76 81 90; /* #4C515A */
  --beerus: 55 61 69; /* #373d45 */
  --goku: 26 33 42; /* #1a212a */
  --gohan: 44 50 58; /* #2c323a */
  --bulma: 255 255 255; /* #FFFFFF */
  --trunks: 141 157 168; /* #8D9DA8 */
  --goten: 255 255 255; /* #FFFFFF */
  --popo: 0 0 0; /* #000000 */
  --jiren: 73 179 86 / 0.2; /* #49b356 */
  --heles: 255 255 255 / 0.04; /* #ffffff */
  --zeno: 80 86 95 / 0.56; /* #50565F8F */

  /* support-colors  */
  --krillin: 248 193 0; /* #f8c100 */
  --krillin-60: 248 193 0 / 0.56; /* #f8c100 */
  --krillin-10: 248 193 0 / 0.12; /* #f8c100 */

  --chichi: 255 78 100; /* #ff4e64 */
  --chichi-60: 255 78 100 / 0.56; /* #ff4e64 */
  --chichi-10: 255 78 100 / 0.12; /* #ff4e64 */

  --roshi: 12 214 100; /* #0CD664 */
  --roshi-60: 12 214 100 / 0.56; /* #0CD664 */
  --roshi-10: 12 214 100 / 0.12; /* #0CD664 */

  --dodoria: 255 138 1; /* #FF8A01 */
  --dodoria-60: 255 138 1 / 0.56; /* #FF8A01 */
  --dodoria-10: 255 138 1 / 0.12; /* #FF8A01 */

  --cell: 27 210 154; /* #1bd29a */
  --cell-60: 27 210 154 / 0.56; /* #1bd29a */
  --cell-10: 27 210 154 / 0.12; /* #1bd29a */

  --raditz: 179 128 74; /* #b3804a */
  --raditz-60: 179 128 74 / 0.56; /* #b3804a */
  --raditz-10: 179 128 74 / 0.12; /* #b3804a */

  --whis: 46 105 255; /* #2e69ff */
  --whis-60: 46 105 255 / 0.56; /* #2e69ff */
  --whis-10: 46 105 255 / 0.12; /* #2e69ff */

  --frieza: 111 59 255; /* #6f3bff */
  --frieza-60: 111 59 255 / 0.56; /* #6f3bff */
  --frieza-10: 111 59 255 / 0.12; /* #6f3bff */

  --nappa: 0 142 173; /* #008ead */
  --nappa-60: 0 142 173 / 0.56; /* #008ead */
  --nappa-10: 0 142 173 / 0.12; /* #008ead */

  /* 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);
}