@font-face {
  font-display: swap;
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('https://janine-d-media-assets.fra1.digitaloceanspaces.com/system/Quicksand-Regular.ttf') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  src: url('https://janine-d-media-assets.fra1.digitaloceanspaces.com/system/Quicksand-SemiBold.ttf') format('woff2');
}

:root, .theme-light {
  /* background primary */
  --light-color-background-primary-transparent: #FFFFFF00;
  --light-color-background-primary-thin: #FFFFFF80;
  --light-color-background-primary-base: #FFFFFFB3;
  --light-color-background-primary-thick: #FFFFFFCC;
  --light-color-background-primary-solid: #FFFFFF;

  /* background secondary */
  --light-color-background-secondary-transparent: #FAFAF900;
  --light-color-background-secondary-thin: #FAFAF980;
  --light-color-background-secondary-base: #FAFAF9B3;
  --light-color-background-secondary-thick: #FAFAF9CC;
  --light-color-background-secondary-solid: #FAFAF9;

  /* background tertiary */
  --light-color-background-tertiary-transparent: #ECE8E600;
  --light-color-background-tertiary-thin: #ECE8E680;
  --light-color-background-tertiary-base: #ECE8E6B3;
  --light-color-background-tertiary-thick: #ECE8E6CC;
  --light-color-background-tertiary-solid: #ECE8E6;

  /* background quaternary */
  --light-color-background-quaternary-transparent: #CFCAC800;
  --light-color-background-quaternary-thin: #CFCAC880;
  --light-color-background-quaternary-base: #CFCAC8B3;
  --light-color-background-quaternary-thick: #CFCAC8CC;
  --light-color-background-quaternary-solid: #CFCAC8;

  /* border primary */
  --light-color-border-primary-transparent: #f2f2f200;
  --light-color-border-primary-thin: #f2f2f280;
  --light-color-border-primary-base: #f2f2f2B3;
  --light-color-border-primary-thick: #f2f2f2CC;
  --light-color-border-primary-solid: #f2f2f2;

  /* border secondary */
  --light-color-border-secondary-transparent: #eeeeeb00;
  --light-color-border-secondary-thin: #eeeeeb80;
  --light-color-border-secondary-base: #eeeeebB3;
  --light-color-border-secondary-thick: #eeeeebCC;
  --light-color-border-secondary-solid: #eeeeeb;

  /* border tertiary */
  --light-color-border-tertiary-transparent: #ece8e600;
  --light-color-border-tertiary-thin: #ece8e680;
  --light-color-border-tertiary-base: #ece8e6B3;
  --light-color-border-tertiary-thick: #ece8e6CC;
  --light-color-border-tertiary-solid: #ece8e6;

  /* border quaternary */
  --light-color-border-quaternary-transparent: #ece8e600;
  --light-color-border-quaternary-thin: #ece8e680;
  --light-color-border-quaternary-base: #ece8e6B3;
  --light-color-border-quaternary-thick: #ece8e6CC;
  --light-color-border-quaternary-solid: #ece8e6;

  /* text */
  --light-color-text: #3E3E3EE8;
  --light-color-text-solid: #3E3E3E;

  /* text secondary */
  --light-color-text-secondary: #6A6968F2;
  --light-color-text-secondary-solid: #6A6968;

  /* accent */
  --light-color-accent: #498793;
  --light-color-accent-secondary: #BCE0E4;
  

  /* TYPOGRAPHY */
  --font-family-base: 'Quicksand';
  --font-weight-base: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 600;
}

/* 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;
  
  }
}