root.scss

:root {
  // primary colors
  --bg-cyan-dark: #008394;
  --bg-amber-dark: #b28900;
  --bg-amber-400: #ffc400;
  --bg-amber-light: #ffcf33;
  // colors
  --blue-secondary: #224967;
  // font colors
  --white: #ffffff;
  --white-primary: #ececec;
  --white-secondory: #cdcdcd;
  --black: #000000;
  --black-primary: #333333;
  --black-secondory: #777777;

  // font sizes
  --h1-xs: 1.6rem;
  --h1-sm: 2rem;
  --h1-md: 2.4rem;
  --h2-xs: 1.6rem;
  --h2-sm: 1.8rem;
  --h2-md: 1.8rem;
  --h3-xs: 1.3rem;
  --h3-sm: 1.4rem;
  --h3-md: 1.4rem;
  --h4-xs: 1rem;
  --h4-sm: 1.1rem;
  --h4-md: 1.2rem;
  // header height
  --header-height-xs: 120px;
  --header-height-md: 150px;

  // themed variables
  --background-color: #ffebcd;
  --bg-hover-button: var(--black-primary);
  --color-hover-button: var(--white-primary);
  --bg-indicator: var(--white-secondory);
  --bg-indicator-active: var(--black-primary);
  --h2-color: var(--black);
  --h3-color: var(--black-primary);
}

[data-theme='dark'] {
  --background-color: var(--black);
  --bg-hover-button: var(--white-primary);
  --color-hover-button: var(--black-primary);
  --bg-indicator: var(--black-secondory);
  --bg-indicator-active: var(--white-primary);
  --h2-color: var(--white);
  --h3-color: var(--white-secondory);
}