.dark-theme {
  --primary-0-color: hsl(216, 61%, 50%);
  --primary-1-color: hsl(216, 49%, 52%);
  --primary-2-color: hsl(217, 60%, 56%);
  --primary-3-color: hsl(216, 79%, 68%);
  --primary-4-color: hsl(216, 81%, 71%);
  --primary-5-color: hsl(217, 70%, 75%);

  --surface-level0-color: hsl(0, 0%, 13%);
  --surface-level1-color: hsl(0, 0%, 15.3%);
  --surface-level2-color: hsl(0, 0%, 24.3%);
  --surface-level3-color: hsl(0, 0%, 33.7%);
  --surface-level4-color: hsl(0, 0%, 43.9%);
  --surface-level5-color: hsl(0, 0%, 54.5%);

  --green-430: hsl(141.522 56.098% 32.157% / 1);
  --yellow-360: hsl(34.286 57.082% 45.686% /1);
  --blue-26: hsl(212.609 95.833% 71.765% /1);
  --red-1: hsl(345, 100%, 36%);

  --scroll-bar-thumb-color: hsl(0, 0%, 11.4%);

  --border-color: hsl(0, 0%, 34.1%);
  --input-border: hsl(0 0% 88.19% / 20%);

  --neutral-color: hsl(210, 2%, 69%);

  --active-color: hsl(0, 0%, 100%);
  --hover-color: hsl(0, 0%, 100%);
  --hover-darker-1-color: hsl(216, 51%, 22%);
  --hover-darker-0-color: hsl(210, 51%, 5%);

  --hover-ligter-0-color: hsl(0, 0%, 100%);

  --text-inverted-color: hsl(0, 0%, 10%);
  --text-color: hsl(0, 0%, 89.8%);
  --text1-color: hsl(0, 0%, 77.6%);
  --text2-color: hsl(0, 0%, 62.7%);
  --text-deamed-color: hsl(0, 0%, 54.5%);
  --placeholder-color: hsl(0, 0%, 54.5%);
  --primary-disabled: hsl(0, 0%, 46%);
  --pure-white: #fff;
  --pure-black: #000;

  --error-color: hsl(1.778 95.745% 72.353% /1);;
  --error0-color: hsl(0, 49%, 52%);
  --ok-color: hsl(211, 83%, 62%);

  --transparent-grid-src: url("/assets/img/images/transparent-grid-dark.png");

  --shadow-ledge: 0 2px 0 0 hsl(none 0% 0% / 0.05), 0 1.5px 0 0 hsl(none 0% 0% / 0.05), 0 1px 0 0 hsl(none 0% 0% / 0.16);
  --shadow-border: 0 0 0 1px hsl(none 0% 100% / 0.08);
  --shadow-high: 0 12px 24px 0 hsl(none 0% 0% / 0.24);
  --shadow-low: 0 1px 4px 0 hsl(none 0% 0% / 0.14);
  --background-modifier-accent: hsl(240 4% 60.784% /0.12156862745098039);
  --background-modifier-active: hsl(240 4% 60.784% /0.1607843137254902);
  --elevation-high: 0 2px 10px 0 hsl(0 calc(1*0%) 0% /0.2);
  --elevation-low: 0 1px 0 hsl(0 calc(1*0%) 0.784% / 0.2), 0 1.5px 0 hsl(240 calc(1*7.692%) 2.549% / 0.05), 0 2px 0 hsl(0 calc(1*0%) 0.784% / 0.05);
  --elevation-stroke: 0 0 0 1px hsl(0 calc(1*0%) 0.784% / 0.15);
  --border-subtle:  color-mix(in oklab, hsl(240 calc(1*4%) 60.784% /0.12156862745098039) 100%, hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-border-color-amount, var(--theme-base-color-amount, 0%)));
}