.light-theme{
  --theme-background: var(--light-100);
  --theme-background-secondary: var(--mauve);
  --theme-text: var(--brand-text);
  --theme-border: var(--dark-900-faded);
  --theme-accent: var(--brand);
  --theme-accent-secondary: var(--violet);

  --btn-primary-bg: var(--lilac);
  --btn-primary-border: var(--lilac);
  --btn-primary-text: var(--brand-text);
  --btn-primary-hover-bg: var(--theme-text);
  --btn-primary-hover-border: var(--theme-text);
  --btn-primary-hover-text: var(--theme-background);

  --btn-secondary-bg: var(--light-100);
  --btn-secondary-border: var(--light-100);
  --btn-secondary-text: var(--brand-secondary);
  --btn-secondary-hover-bg: var(--theme-text);
  --btn-secondary-hover-border: var(--theme-text);
  --btn-secondary-hover-text: var(--theme-background);
}

.brand-theme {
  --theme-background: var(--brand-secondary);
  --theme-background-secondary: var(--brand-secondary);
  --theme-text: var(--light-100);
  --theme-border: var(--light-100-faded);
  --theme-accent: var(--coral);
  --theme-accent-secondary: var(--lilac);

  --btn-primary-bg: var(--coral);
  --btn-primary-border: var(--coral);
  --btn-primary-text: var(--brand-text);
  --btn-primary-hover-bg: var(--theme-text);
  --btn-primary-hover-border: var(--theme-text);
  --btn-primary-hover-text: var(--theme-background);

  --btn-secondary-bg: var(--transparent);
  --btn-secondary-border: var(--theme-border);
  --btn-secondary-text: var(--theme-text);
  --btn-secondary-hover-bg: var(--theme-text);
  --btn-secondary-hover-border: var(--theme-text);
  --btn-secondary-hover-text: var(--theme-background);
}
.test-theme{
  width: 100%;
  height: 100vh;
}
.light-theme,
.brand-theme{
  background-color: var(--theme-background);
  color: var(--theme-text);
}
.border{
  border: var(--border-stroke) solid var(--theme-border);
}
.accent-text{
  color: var(--theme-accent);
}
.accent-bg{
  background-color: var(--theme-accent);
}
.accent-text-secondary{
  color: var(--theme-accent-secondary);
}
.accent-bg-secondary{
  background-color: var(--theme-accent-secondary);
}
.btn-primary,
.btn-secondary{
  padding: var(--spacing-125) var(--spacing-125);
  border-width: var(--border-stroke);
  border-style: solid;
  border-radius: var(--radius-rounded);
  cursor: pointer;
  display: inline-block;
  font-size: var(--font-button);
  line-height: var(--font-button-line-height);
  letter-spacing: var(--font-button-letter-spacing);
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
.bg-secondary{
  background-color: var(--theme-background-secondary);
}

.btn-primary{
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
}
.btn-primary:hover{
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-border);
  color: var(--btn-primary-hover-text);
}
.btn-secondary{
  background-color: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-text);
}
.btn-secondary:hover{
  background-color: var(--btn-secondary-hover-bg);
  border-color: var(--btn-secondary-hover-border);
  color: var(--btn-secondary-hover-text);
}
.light-theme svg *.fill,
.brand-theme svg *.fill{
  fill: var(--theme-text);
}
.light-theme svg *.stroke,
.brand-theme svg *.stroke{
  stroke: var(--theme-text);
}
.light-theme .accent-text svg *.fill,
.brand-theme .accent-text svg *.fill{
  fill: var(--theme-accent);
}
.light-theme .accent-text svg *.stroke,
.brand-theme .accent-bg svg *.stroke{
  stroke: var(--theme-accent);
}

@media only screen and (max-width: 1023px) {
  .btn-primary,
  .btn-secondary{
    font-size: var(--font-button-mobile);
  }
  
}