@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Light theme */
  --rp-c-brand: hsl(215, 99%, 52%);
  --rp-c-brand-dark: hsl(215, 63%, 4%);
  --rp-c-brand-darker: hsl(215, 28%, 25%);
  --rp-c-brand-light: hsl(215, 99%, 52%);
  --rp-c-brand-lighter: hsl(215, 20%, 90%);
  --rp-c-link: var(--rp-c-brand);
  --rp-c-brand-tint: hsla(215, 99%, 52%, 0.15);
  --rp-code-title-bg: hsla(215, 99%, 52%, 0.15);
  --rp-code-block-bg: hsla(215, 99%, 52%, 0.05);
  --rp-custom-block-info-bg: hsla(215, 99%, 52%, 0.05);
  --rp-custom-block-info-border: hsla(215, 99%, 52%, 0.5);
  --rp-c-border: hsl(215, 6%, 88%);
}

.dark {
  /* Dark theme */
  --rp-c-brand: hsl(211, 99%, 52%);
  --rp-c-brand-dark: hsl(215, 99%, 52%);
  --rp-c-brand-darker: hsl(215, 28%, 22%);
  --rp-c-brand-light: hsl(215, 17%, 82%);
  --rp-c-brand-lighter: hsl(215, 28%, 65%);
  --rp-c-link: var(--rp-c-brand);
  --rp-c-brand-tint: hsla(215, 17%, 82%, 0.15);
  --rp-code-title-bg: hsla(215, 17%, 82%, 0.15);
  --rp-code-block-bg: hsla(215, 17%, 82%, 0.05);
  --rp-custom-block-info-bg: hsla(215, 17%, 82%, 0.05);
  --rp-custom-block-info-border: hsla(215, 17%, 82%, 0.5);
  --rp-c-border: hsla(215, 6%, 88%, 0.2);
}
