:root {
  --color-white: hsl(0, 0%, 100%);
  --color-gray-25: hsl(0, 0%, 99%);
  --color-gray-100: hsl(240, 5%, 96%);
  --color-gray-300: hsl(240, 6%, 83%);
  --color-gray-400: hsl(240, 6%, 65%);
  --color-gray-800: hsl(228, 6%, 16%);
  --color-gray-900: hsl(240, 6%, 10%);
  --color-brand-300: hsl(48, 97%, 72%);
  
  --text-size-small: 0.875rem;
  --text-size-medium: 1.25rem;
  --heading-style-medium: 2.25rem;
  --size-0: 0px;
  --size-tiny: 0.125rem;
  --size-xxsmall: 0.25rem;
  --size-xsmall: 0.5rem;
  --size-small: 1rem;
  --size-medium: 1.5rem;
  --size-large: 2rem;
  --size-xlarge: 3rem;
  --size-xxlarge: 4rem;
  --size-huge: 6rem;
  --size-xhuge: 8rem;
  --size-xxhuge: 12rem;
  --gap-content: var(--size-xsmall);
  --gap-grid: var(--size-large);
  
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3-2: 3fr 2fr;
  --max-width-content-medium: 45ch;
  --max-width-content-large: 60ch;
  --max-width-content-xlarge: 80ch;
  --max-width-heading-small: 18ch;
  --radius-tiny: 0.25rem;
  --radius-xsmall: 0.5rem;
  --radius-large: 3rem;
}
.is-dark {
  --color-white: hsl(228, 6%, 16%);
  --color-subtle: hsl(235, 6%, 34%);
  --color-muted: hsl(240, 6%, 65%);
  --color-medium-muted: hsl(240, 6%, 65%);
  --color-medium: hsl(240, 6%, 83%);
  --color-dark: hsl(0, 0%, 99%);
  --color-black: hsl(0, 0%, 0%);
}

:where(.brxe-text),
:where(.brxe-text-basic) {
  color: var(--color-medium);
}