:root, .theme-light {
  /* background primary */
  --light-color-background-primary-transparent: transparent;
  --light-color-background-primary-thin: transparent;
  --light-color-background-primary-base: transparent;
  --light-color-background-primary-thick: transparent;
  --light-color-background-primary-solid: inherit;

  /* background secondary */
  --light-color-background-secondary-transparent: transparent;
  --light-color-background-secondary-thin: transparent;
  --light-color-background-secondary-base: transparent;
  --light-color-background-secondary-thick: transparent;
  --light-color-background-secondary-solid: inherit;

  /* background tertiary */
  --light-color-background-tertiary-transparent: transparent;
  --light-color-background-tertiary-thin: transparent;
  --light-color-background-tertiary-base: transparent;
  --light-color-background-tertiary-thick: transparent;
  --light-color-background-tertiary-solid: inherit;

  /* background quaternary */
  --light-color-background-quaternary-transparent: transparent;
  --light-color-background-quaternary-thin: transparent;
  --light-color-background-quaternary-base: transparent;
  --light-color-background-quaternary-thick: transparent;
  --light-color-background-quaternary-solid: inherit;

  /* border primary */
  --light-color-border-primary-transparent: transparent;
  --light-color-border-primary-thin: transparent;
  --light-color-border-primary-base: transparent;
  --light-color-border-primary-thick: transparent;
  --light-color-border-primary-solid: inherit;

  /* border secondary */
  --light-color-border-secondary-transparent: transparent;
  --light-color-border-secondary-thin: transparent;
  --light-color-border-secondary-base: transparent;
  --light-color-border-secondary-thick: transparent;
  --light-color-border-secondary-solid: inherit;

  /* border tertiary */
  --light-color-border-tertiary-transparent: transparent;
  --light-color-border-tertiary-thin: transparent;
  --light-color-border-tertiary-base: transparent;
  --light-color-border-tertiary-thick: transparent;
  --light-color-border-tertiary-solid: inherit;

  /* border quaternary */
  --light-color-border-quaternary-transparent: transparent;
  --light-color-border-quaternary-thin: transparent;
  --light-color-border-quaternary-base: transparent;
  --light-color-border-quaternary-thick: transparent;
  --light-color-border-quaternary-solid: inherit;

  /* text */
  --light-color-text: inherit;
  --light-color-text-solid: inherit;

  /* text secondary */
  --light-color-text-secondary: inherit;
  --light-color-text-secondary-solid: inherit;

  /* accent */
  --light-color-accent: inherit;
  --light-color-accent-secondary: inherit;
  

  /* TYPOGRAPHY */
  --font-family-base: 'sans-serif';
  --font-weight-base: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 500;
}

/* dark mode */
.theme-dark {
  /* background primary */
  --dark-color-background-primary-transparent: transparent;
  --dark-color-background-primary-thin: transparent;
  --dark-color-background-primary-base: transparent;
  --dark-color-background-primary-thick: transparent;
  --dark-color-background-primary-solid: inherit;

  /* background secondary */
  --dark-color-background-secondary-transparent: transparent;
  --dark-color-background-secondary-thin: transparent;
  --dark-color-background-secondary-base: transparent;
  --dark-color-background-secondary-thick: transparent;
  --dark-color-background-secondary-solid: inherit;

  /* background tertiary */
  --dark-color-background-tertiary-transparent: transparent;
  --dark-color-background-tertiary-thin: transparent;
  --dark-color-background-tertiary-base: transparent;
  --dark-color-background-tertiary-thick: transparent;
  --dark-color-background-tertiary-solid: inherit;

  /* background quaternary */
  --dark-color-background-quaternary-transparent: transparent;
  --dark-color-background-quaternary-thin: transparent;
  --dark-color-background-quaternary-base: transparent;
  --dark-color-background-quaternary-thick: transparent;
  --dark-color-background-quaternary-solid: inherit;

  /* border primary */
  --dark-color-border-primary-transparent: transparent;
  --dark-color-border-primary-thin: transparent;
  --dark-color-border-primary-base: transparent;
  --dark-color-border-primary-thick: transparent;
  --dark-color-border-primary-solid: inherit;

  /* border secondary */
  --dark-color-border-secondary-transparent: transparent;
  --dark-color-border-secondary-thin: transparent;
  --dark-color-border-secondary-base: transparent;
  --dark-color-border-secondary-thick: transparent;
  --dark-color-border-secondary-solid: inherit;

  /* border tertiary */
  --dark-color-border-tertiary-transparent: transparent;
  --dark-color-border-tertiary-thin: transparent;
  --dark-color-border-tertiary-base: transparent;
  --dark-color-border-tertiary-thick: transparent;
  --dark-color-border-tertiary-solid: inherit;

  /* border quaternary */
  --dark-color-border-quaternary-transparent: transparent;
  --dark-color-border-quaternary-thin: transparent;
  --dark-color-border-quaternary-base: transparent;
  --dark-color-border-quaternary-thick: transparent;
  --dark-color-border-quaternary-solid: inherit;

  /* text */
  --dark-color-text: inherit;
  --dark-color-text-solid: inherit;

  /* text secondary */
  --dark-color-text-secondary: inherit;
  --dark-color-text-secondary-solid: inherit;

  /* accent */
  --dark-color-accent: inherit;
  --dark-color-accent-secondary: inherit;
  
}

/* apply system dark mode when not overridden by theme tag */
@media (prefers-color-scheme: dark) {
  :root:not(.ignore-color-scheme-preference),
  .app:not(.ignore-color-scheme-preference),
  .theme-light.theme-auto {
  /* background primary */
  --dark-color-background-primary-transparent: transparent;
  --dark-color-background-primary-thin: transparent;
  --dark-color-background-primary-base: transparent;
  --dark-color-background-primary-thick: transparent;
  --dark-color-background-primary-solid: inherit;

  /* background secondary */
  --dark-color-background-secondary-transparent: transparent;
  --dark-color-background-secondary-thin: transparent;
  --dark-color-background-secondary-base: transparent;
  --dark-color-background-secondary-thick: transparent;
  --dark-color-background-secondary-solid: inherit;

  /* background tertiary */
  --dark-color-background-tertiary-transparent: transparent;
  --dark-color-background-tertiary-thin: transparent;
  --dark-color-background-tertiary-base: transparent;
  --dark-color-background-tertiary-thick: transparent;
  --dark-color-background-tertiary-solid: inherit;

  /* background quaternary */
  --dark-color-background-quaternary-transparent: transparent;
  --dark-color-background-quaternary-thin: transparent;
  --dark-color-background-quaternary-base: transparent;
  --dark-color-background-quaternary-thick: transparent;
  --dark-color-background-quaternary-solid: inherit;

  /* border primary */
  --dark-color-border-primary-transparent: transparent;
  --dark-color-border-primary-thin: transparent;
  --dark-color-border-primary-base: transparent;
  --dark-color-border-primary-thick: transparent;
  --dark-color-border-primary-solid: inherit;

  /* border secondary */
  --dark-color-border-secondary-transparent: transparent;
  --dark-color-border-secondary-thin: transparent;
  --dark-color-border-secondary-base: transparent;
  --dark-color-border-secondary-thick: transparent;
  --dark-color-border-secondary-solid: inherit;

  /* border tertiary */
  --dark-color-border-tertiary-transparent: transparent;
  --dark-color-border-tertiary-thin: transparent;
  --dark-color-border-tertiary-base: transparent;
  --dark-color-border-tertiary-thick: transparent;
  --dark-color-border-tertiary-solid: inherit;

  /* border quaternary */
  --dark-color-border-quaternary-transparent: transparent;
  --dark-color-border-quaternary-thin: transparent;
  --dark-color-border-quaternary-base: transparent;
  --dark-color-border-quaternary-thick: transparent;
  --dark-color-border-quaternary-solid: inherit;

  /* text */
  --dark-color-text: inherit;
  --dark-color-text-solid: inherit;

  /* text secondary */
  --dark-color-text-secondary: inherit;
  --dark-color-text-secondary-solid: inherit;

  /* accent */
  --dark-color-accent: inherit;
  --dark-color-accent-secondary: inherit;
  
  }
}