:root {
  --primary-bg-light: #6dd3e7;
  --primary-bg-dark: #0b0013;
  --cloud-light: #f7e7eb;
  --cloud-dark: #11103c;
  --cloud2-light: #fafbf0;
  --cloud2-dark: #3c75b8;

  --text-on-dark: white;
  --text-on-light: black;
  --icon-number-light: #f0f0f0;
  --icon-number-dark: #12103b;
  --icon-bg-light: #fff;
  --icon-bg-dark: #191c51;
  --number-light: black;
  --number-dark: #ccc;

  --primary-bg: var(--primary-bg-light);
  --cloud-bg: var(--cloud-light);
  --cloud-bg2: var(--cloud2-light);
  --text: var(--text-on-light);
  --icon-number: var(--icon-number-light);
  --icon-bg: var(--icon-bg-light);
  --number: var(--number-light);

  /* toggle theme*/
  --toggle-width: 60px;
  --toggle-height: 45px;
  --slider-bg: var(--primary-bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-bg: var(--primary-bg-dark);
    --cloud-bg: var(--cloud-dark);
    --cloud-bg2: var(--cloud2-dark);
    --text: var(--text-on-dark);
    --icon-number: var(--icon-number-dark);
    --icon-bg: var(--icon-bg-dark);
    --number: var(--number-dark);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --primary-bg: var(--primary-bg-light);
    --cloud-bg: var(--cloud-light);
    --cloud-bg2: var(--cloud2-light);
    --text: var(--text-on-light);
    --icon-number: var(--icon-number-light);
    --icon-bg: var(--icon-bg-light);
    --number: var(--number-light);
  }
}