:root,
.light {
  --color-accent: theme('colors.pink.600');
  --slender-border-radius: theme('borderRadius.DEFAULT');
  --component-color-gradient-stops: theme('colors.pink.50'), theme('colors.fuchsia.50');
  --color-divide: theme('colors.gray.200');
  --pre-color-background: theme('colors.gray.100');
  --pre-color-text: theme('colors.gray.800');

  /* Code highlighting */
  --code-color-punctuation: theme('colors.zinc.400');
  --code-color-property: theme('colors.gray.600');
  --code-color-string: theme('colors.emerald.600');
  --code-color-number: theme('colors.fuchsia.600');
  --code-color-boolean: theme('colors.rose.600');
  --code-color-null: theme('colors.blue.600');
  --code-color-keyword: theme('colors.cyan.600');
  --code-color-constant: theme('colors.purple.600');
  --code-color-parameter: theme('colors.indigo.600');
  --code-color-function: theme('colors.cyan.600');
  --code-color-tag: theme('colors.pink.600');

  /* Slender UI theme variables */
  --slender-color-background: rgb_triple(theme('colors.white'));
}

.dark {
  --color-text: theme('colors.gray.100');
  --color-accent: theme('colors.pink.400');
  --component-color-gradient-stops: theme('colors.slate.700'), theme('colors.gray.700');
  --color-divide: theme('colors.zinc.700');
  --pre-color-background: theme('colors.gray.700');
  --pre-color-text: theme('colors.zinc.100');


  /* Slender UI theme variables */
  --slender-border-radius: 0px;
  --slender-radio-radius: 0px;
  --slender-color-background: rgb_triple(theme('colors.zinc.800'));
  --slender-color-elevated-bg: rgb_triple(theme('colors.zinc.700'));

  /* Code highlighting */
  --code-color-punctuation: theme('colors.zinc.400');
  --code-color-property: theme('colors.gray.400');
  --code-color-string: theme('colors.emerald.400');
  --code-color-number: theme('colors.fuchsia.400');
  --code-color-boolean: theme('colors.rose.400');
  --code-color-null: theme('colors.blue.400');
  --code-color-keyword: theme('colors.cyan.400');
  --code-color-constant: theme('colors.purple.400');
  --code-color-parameter: theme('colors.indigo.400');
  --code-color-function: theme('colors.cyan.400');
  --code-color-tag: theme('colors.pink.400');
}

.ultra-dark {
  --color-text: theme('colors.white');
  --color-accent: theme('colors.pink.400');
  --component-color-gradient-stops: theme('colors.slate.700'), theme('colors.gray.700');
  --color-divide: theme('colors.gray.800');
  --pre-color-background: theme('colors.gray.800');
  --pre-color-text: theme('colors.zinc.100');

  /* Slender UI theme variables */
  --slender-color-background: rgb_triple(theme('colors.black'));
  --slender-color-elevated-bg: rgb_triple(theme('colors.zinc.800'));

  /* Code highlighting */
  --code-color-punctuation: theme('colors.zinc.400');
  --code-color-property: theme('colors.gray.400');
  --code-color-string: theme('colors.emerald.400');
  --code-color-number: theme('colors.fuchsia.400');
  --code-color-boolean: theme('colors.rose.400');
  --code-color-null: theme('colors.blue.400');
  --code-color-keyword: theme('colors.cyan.400');
  --code-color-constant: theme('colors.purple.400');
  --code-color-parameter: theme('colors.indigo.400');
  --code-color-function: theme('colors.cyan.400');
  --code-color-tag: theme('colors.pink.400');
}

.emerald {
  --color-text: theme('colors.white');
  --color-accent: theme('colors.pink.500');
  --component-color-gradient-stops: theme('colors.teal.700'), theme('colors.green.700');
  --color-divide: theme('colors.emerald.800');

  --pre-color-background: theme('colors.gray.800');
  --pre-color-text: theme('colors.zinc.100');

  /* Code highlighting */
  --code-color-punctuation: theme('colors.zinc.400');
  --code-color-property: theme('colors.gray.400');
  --code-color-string: theme('colors.emerald.400');
  --code-color-number: theme('colors.fuchsia.400');
  --code-color-boolean: theme('colors.rose.400');
  --code-color-null: theme('colors.blue.400');
  --code-color-keyword: theme('colors.cyan.400');
  --code-color-constant: theme('colors.purple.400');
  --code-color-parameter: theme('colors.indigo.400');
  --code-color-function: theme('colors.cyan.400');
  --code-color-tag: theme('colors.pink.400');

  /* Slender UI theme variables */
  --slender-color-background: rgb_triple(theme('colors.emerald.900'));
  --slender-color-elevated-bg: rgb_triple(theme('colors.emerald.800'));

  --slender-color-primary: rgb_triple(theme('colors.emerald.600'));
  --slender-color-primary-hover: rgb_triple(theme('colors.emerald.600'));
  --slender-color-primary-subtle: rgb_triple(theme('colors.emerald.600'));
  --slender-color-primary-subtle-hover: rgb_triple(theme('colors.emerald.300'));
  --slender-color-primary-text: rgb_triple(theme('colors.white'));
}