:root {
  color-scheme: light dark;

  --white: oklch(95% 0 0);
  --dark-white: oklch(92.5% 0 0);
  --light-gray: oklch(90% 0 0);
  --gray: oklch(55% 0 0);
  --dark-gray: oklch(20% 0 0);
  --light-black: oklch(17.5% 0 0);
  --black: oklch(15% 0 0);
  /*oklch(0.2038 0.0076 196.57)*/
  --red: oklch(0.607 0.241 26.328);
  --orange: oklch(67.64% 0.191 44.41);
  --amber: oklch(0.7175 0.1835 64.199);
  --yellow: oklch(0.738 0.173 80.9405);
  --avocado: oklch(0.72 0.19 110);
  --lime: oklch(0.708 0.2165 131.267);
  --green: oklch(0.675 0.2065 149.3965);
  --emerald: oklch(0.646 0.1575 162.8525);
  --teal: oklch(0.652 0.129 183.6035);
  --cyan: oklch(0.662 0.1345 218.472);
  --sky: oklch(0.6365 0.1635 239.6445);
  --blue: oklch(0.5845 0.2295 261.348);
  --indigo: oklch(0.548 0.2475 277.0415);
  --violet: oklch(0.5735 0.2655 292.863);
  --purple: oklch(0.5925 0.2765 303.1105);
  --fuchsia: oklch(0.629 0.294 322.523);
  --pink: oklch(0.624 0.245 357.444);
  --rose: oklch(0.6155 0.2495 17.012);
  --background-color: light-dark(var(--white), var(--black));
  --color: light-dark(var(--black), var(--white));
  --off-color: var(--gray);
  --border-color: light-dark(var(--light-gray), var(--dark-gray));
  --inv-border-color: light-dark(var(--dark-gray), var(--light-gray));
  --off-border-color: light-dark(var(--dark-white), var(--light-black));

  --font-size-xs: 0.75rem;
  --line-height-xs: calc(1 / 0.75);
  --font-size-sm: 0.875rem;
  --line-height-sm: calc(1.25 / 0.875);
  --font-size-base: 1rem;
  --line-height-base: calc(1.5 / 1);
  --font-size-lg: 1.125rem;
  --line-height-lg: calc(1.75 / 1.125);
  --font-size-xl: 1.25rem;
  --line-height-xl: calc(1.75 / 1.25);

  --main-padding: 2rem;
  /*@media (max-width: 767px) {
    --main-padding: 1.5rem;
  }*/
  --negative-main-padding: calc(-1 * var(--main-padding));
  --font-weight-base: 400;
  --default-main-width: 25rem;
  --bottom-area: 69vh;
}