:root {
  --color-primary: #f8f3f0;
  --color-secondary: #009f4b;

  --color-bg: #f8f3f0;
  --color-text: #333d3a;
  --light-bg: #f8f3f0;
  --light-text: #333d3a;
  --dark-bg: #009f4b;
  --dark-text: #f8f3f0;

  --button-bg-light: #009f4b;
  --button-text-light: #f8f3f0;
  --button-bg-dark: #f8f3f0;
  --button-text-dark: #009f4b;
  --button-bg: #009f4b;
  --button-text: #f8f3f0;

  --header-bg: #f8f3f0;
  --header-text: #333d3a;
  --header-transparent: 1;

  --topbar-height: 0px;
  --topbar-bg: #f8f3f0;
  --topbar-text: #ffffff;

  --footer-bg: #f8f3f0;
  --footer-text: #333d3a;

  --bottom-bar-bg: #f8f3f0;
  --bottom-bar-text: #333d3a;

  --popup-bg: #f8f3f0;
  --popup-text: #333d3a;
}

[data-theme="dark"] {
  --color-bg: var(--dark-bg);
  --color-text: var(--dark-text);
  --button-bg: var(--button-bg-dark);
  --button-text: var(--button-text-dark);
}

.section[data-theme-section="dark"] {
  --color-bg: var(--dark-bg);
  --color-text: var(--dark-text);
  --button-bg: var(--button-bg-dark);
  --button-text: var(--button-text-dark);
}