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

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

:root, .theme-light {
  /* background primary */
  --light-color-background-primary-transparent: #fdfdfd00;
  --light-color-background-primary-thin: #fdfdfd80;
  --light-color-background-primary-base: #fdfdfdB3;
  --light-color-background-primary-thick: #fdfdfdCC;
  --light-color-background-primary-solid: #fdfdfd;

  /* background secondary */
  --light-color-background-secondary-transparent: #F3F3F300;
  --light-color-background-secondary-thin: #F3F3F380;
  --light-color-background-secondary-base: #F3F3F3B3;
  --light-color-background-secondary-thick: #F3F3F3CC;
  --light-color-background-secondary-solid: #F3F3F3;

  /* background tertiary */
  --light-color-background-tertiary-transparent: #e9e9e900;
  --light-color-background-tertiary-thin: #e9e9e980;
  --light-color-background-tertiary-base: #e9e9e9B3;
  --light-color-background-tertiary-thick: #e9e9e9CC;
  --light-color-background-tertiary-solid: #e9e9e9;

  /* background quaternary */
  --light-color-background-quaternary-transparent: #dfdfdf00;
  --light-color-background-quaternary-thin: #dfdfdf80;
  --light-color-background-quaternary-base: #dfdfdfB3;
  --light-color-background-quaternary-thick: #dfdfdfCC;
  --light-color-background-quaternary-solid: #dfdfdf;

  /* border primary */
  --light-color-border-primary-transparent: #f3f3f300;
  --light-color-border-primary-thin: #f3f3f380;
  --light-color-border-primary-base: #f3f3f3B3;
  --light-color-border-primary-thick: #f3f3f3CC;
  --light-color-border-primary-solid: #f3f3f3;

  /* border secondary */
  --light-color-border-secondary-transparent: #e9e9e900;
  --light-color-border-secondary-thin: #e9e9e980;
  --light-color-border-secondary-base: #e9e9e9B3;
  --light-color-border-secondary-thick: #e9e9e9CC;
  --light-color-border-secondary-solid: #e9e9e9;

  /* border tertiary */
  --light-color-border-tertiary-transparent: #dfdfdf00;
  --light-color-border-tertiary-thin: #dfdfdf80;
  --light-color-border-tertiary-base: #dfdfdfB3;
  --light-color-border-tertiary-thick: #dfdfdfCC;
  --light-color-border-tertiary-solid: #dfdfdf;

  /* border quaternary */
  --light-color-border-quaternary-transparent: #d6d6d600;
  --light-color-border-quaternary-thin: #d6d6d680;
  --light-color-border-quaternary-base: #d6d6d6B3;
  --light-color-border-quaternary-thick: #d6d6d6CC;
  --light-color-border-quaternary-solid: #d6d6d6;

  /* text */
  --light-color-text: #4D4D4DE8;
  --light-color-text-solid: #4D4D4D;

  /* text secondary */
  --light-color-text-secondary: #797979F2;
  --light-color-text-secondary-solid: #797979;

  /* accent */
  --light-color-accent: #ade6e6;
  --light-color-accent-secondary: #e6caad;
  

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

/* dark mode */
.theme-dark {
  /* background primary */
  --dark-color-background-primary-transparent: #11111100;
  --dark-color-background-primary-thin: #11111180;
  --dark-color-background-primary-base: #111111B3;
  --dark-color-background-primary-thick: #111111CC;
  --dark-color-background-primary-solid: #111111;

  /* background secondary */
  --dark-color-background-secondary-transparent: #1b1b1b00;
  --dark-color-background-secondary-thin: #1b1b1b80;
  --dark-color-background-secondary-base: #1b1b1bB3;
  --dark-color-background-secondary-thick: #1b1b1bCC;
  --dark-color-background-secondary-solid: #1b1b1b;

  /* background tertiary */
  --dark-color-background-tertiary-transparent: #25252500;
  --dark-color-background-tertiary-thin: #25252580;
  --dark-color-background-tertiary-base: #252525B3;
  --dark-color-background-tertiary-thick: #252525CC;
  --dark-color-background-tertiary-solid: #252525;

  /* background quaternary */
  --dark-color-background-quaternary-transparent: #2f2f2f00;
  --dark-color-background-quaternary-thin: #2f2f2f80;
  --dark-color-background-quaternary-base: #2f2f2fB3;
  --dark-color-background-quaternary-thick: #2f2f2fCC;
  --dark-color-background-quaternary-solid: #2f2f2f;

  /* border primary */
  --dark-color-border-primary-transparent: #1b1b1b00;
  --dark-color-border-primary-thin: #1b1b1b80;
  --dark-color-border-primary-base: #1b1b1bB3;
  --dark-color-border-primary-thick: #1b1b1bCC;
  --dark-color-border-primary-solid: #1b1b1b;

  /* border secondary */
  --dark-color-border-secondary-transparent: #25252500;
  --dark-color-border-secondary-thin: #25252580;
  --dark-color-border-secondary-base: #252525B3;
  --dark-color-border-secondary-thick: #252525CC;
  --dark-color-border-secondary-solid: #252525;

  /* border tertiary */
  --dark-color-border-tertiary-transparent: #2f2f2f00;
  --dark-color-border-tertiary-thin: #2f2f2f80;
  --dark-color-border-tertiary-base: #2f2f2fB3;
  --dark-color-border-tertiary-thick: #2f2f2fCC;
  --dark-color-border-tertiary-solid: #2f2f2f;

  /* border quaternary */
  --dark-color-border-quaternary-transparent: #39393900;
  --dark-color-border-quaternary-thin: #39393980;
  --dark-color-border-quaternary-base: #393939B3;
  --dark-color-border-quaternary-thick: #393939CC;
  --dark-color-border-quaternary-solid: #393939;

  /* text */
  --dark-color-text: #F3F3F3E8;
  --dark-color-text-solid: #F3F3F3;

  /* text secondary */
  --dark-color-text-secondary: #D3D3D3F2;
  --dark-color-text-secondary-solid: #D3D3D3;

  /* accent */
  --dark-color-accent: #ade6e6;
  --dark-color-accent-secondary: #e6caad;
  
}

/* 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: #11111100;
  --dark-color-background-primary-thin: #11111180;
  --dark-color-background-primary-base: #111111B3;
  --dark-color-background-primary-thick: #111111CC;
  --dark-color-background-primary-solid: #111111;

  /* background secondary */
  --dark-color-background-secondary-transparent: #1b1b1b00;
  --dark-color-background-secondary-thin: #1b1b1b80;
  --dark-color-background-secondary-base: #1b1b1bB3;
  --dark-color-background-secondary-thick: #1b1b1bCC;
  --dark-color-background-secondary-solid: #1b1b1b;

  /* background tertiary */
  --dark-color-background-tertiary-transparent: #25252500;
  --dark-color-background-tertiary-thin: #25252580;
  --dark-color-background-tertiary-base: #252525B3;
  --dark-color-background-tertiary-thick: #252525CC;
  --dark-color-background-tertiary-solid: #252525;

  /* background quaternary */
  --dark-color-background-quaternary-transparent: #2f2f2f00;
  --dark-color-background-quaternary-thin: #2f2f2f80;
  --dark-color-background-quaternary-base: #2f2f2fB3;
  --dark-color-background-quaternary-thick: #2f2f2fCC;
  --dark-color-background-quaternary-solid: #2f2f2f;

  /* border primary */
  --dark-color-border-primary-transparent: #1b1b1b00;
  --dark-color-border-primary-thin: #1b1b1b80;
  --dark-color-border-primary-base: #1b1b1bB3;
  --dark-color-border-primary-thick: #1b1b1bCC;
  --dark-color-border-primary-solid: #1b1b1b;

  /* border secondary */
  --dark-color-border-secondary-transparent: #25252500;
  --dark-color-border-secondary-thin: #25252580;
  --dark-color-border-secondary-base: #252525B3;
  --dark-color-border-secondary-thick: #252525CC;
  --dark-color-border-secondary-solid: #252525;

  /* border tertiary */
  --dark-color-border-tertiary-transparent: #2f2f2f00;
  --dark-color-border-tertiary-thin: #2f2f2f80;
  --dark-color-border-tertiary-base: #2f2f2fB3;
  --dark-color-border-tertiary-thick: #2f2f2fCC;
  --dark-color-border-tertiary-solid: #2f2f2f;

  /* border quaternary */
  --dark-color-border-quaternary-transparent: #39393900;
  --dark-color-border-quaternary-thin: #39393980;
  --dark-color-border-quaternary-base: #393939B3;
  --dark-color-border-quaternary-thick: #393939CC;
  --dark-color-border-quaternary-solid: #393939;

  /* text */
  --dark-color-text: #F3F3F3E8;
  --dark-color-text-solid: #F3F3F3;

  /* text secondary */
  --dark-color-text-secondary: #D3D3D3F2;
  --dark-color-text-secondary-solid: #D3D3D3;

  /* accent */
  --dark-color-accent: #ade6e6;
  --dark-color-accent-secondary: #e6caad;
  
  }
}