@font-face {
  font-display: swap;
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  src: url('https://media.cdn.88miles.shop/system/Figtree-Medium.ttf') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  src: url('https://media.cdn.88miles.shop/system/Figtree-SemiBold.ttf') format('woff2');
}

:root, .theme-light {
  /* background primary */
  --light-color-background-primary-transparent: #13131300;
  --light-color-background-primary-thin: #13131380;
  --light-color-background-primary-base: #131313B3;
  --light-color-background-primary-thick: #131313CC;
  --light-color-background-primary-solid: #131313;

  /* background secondary */
  --light-color-background-secondary-transparent: #1d1d1d00;
  --light-color-background-secondary-thin: #1d1d1d80;
  --light-color-background-secondary-base: #1d1d1dB3;
  --light-color-background-secondary-thick: #1d1d1dCC;
  --light-color-background-secondary-solid: #1d1d1d;

  /* background tertiary */
  --light-color-background-tertiary-transparent: #27272700;
  --light-color-background-tertiary-thin: #27272780;
  --light-color-background-tertiary-base: #272727B3;
  --light-color-background-tertiary-thick: #272727CC;
  --light-color-background-tertiary-solid: #272727;

  /* background quaternary */
  --light-color-background-quaternary-transparent: #30303000;
  --light-color-background-quaternary-thin: #30303080;
  --light-color-background-quaternary-base: #303030B3;
  --light-color-background-quaternary-thick: #303030CC;
  --light-color-background-quaternary-solid: #303030;

  /* border primary */
  --light-color-border-primary-transparent: #27272700;
  --light-color-border-primary-thin: #27272780;
  --light-color-border-primary-base: #272727B3;
  --light-color-border-primary-thick: #272727CC;
  --light-color-border-primary-solid: #272727;

  /* border secondary */
  --light-color-border-secondary-transparent: #30303000;
  --light-color-border-secondary-thin: #30303080;
  --light-color-border-secondary-base: #303030B3;
  --light-color-border-secondary-thick: #303030CC;
  --light-color-border-secondary-solid: #303030;

  /* border tertiary */
  --light-color-border-tertiary-transparent: #3a3a3a00;
  --light-color-border-tertiary-thin: #3a3a3a80;
  --light-color-border-tertiary-base: #3a3a3aB3;
  --light-color-border-tertiary-thick: #3a3a3aCC;
  --light-color-border-tertiary-solid: #3a3a3a;

  /* border quaternary */
  --light-color-border-quaternary-transparent: #44444400;
  --light-color-border-quaternary-thin: #44444480;
  --light-color-border-quaternary-base: #444444B3;
  --light-color-border-quaternary-thick: #444444CC;
  --light-color-border-quaternary-solid: #444444;

  /* text */
  --light-color-text: #AAAAAAE8;
  --light-color-text-solid: #AAAAAA;

  /* text secondary */
  --light-color-text-secondary: #FFFEFEF2;
  --light-color-text-secondary-solid: #FFFEFE;

  /* accent */
  --light-color-accent: #27849d;
  --light-color-accent-secondary: #52b8d4;

  /* eyebrow */
  --light-color-eyebrow: #27849d;
  

  /* TYPOGRAPHY */
  --font-family-base: 'Figtree';
  --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: #AAAAAAE8;
  --dark-color-text-solid: #AAAAAA;

  /* text secondary */
  --dark-color-text-secondary: #FFFEFEF2;
  --dark-color-text-secondary-solid: #FFFEFE;

  /* accent */
  --dark-color-accent: #27849d;
  --dark-color-accent-secondary: #52b8d4;

  /* eyebrow */
  --dark-color-eyebrow: #27849d;
  
}

/* 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: #AAAAAAE8;
  --dark-color-text-solid: #AAAAAA;

  /* text secondary */
  --dark-color-text-secondary: #FFFEFEF2;
  --dark-color-text-secondary-solid: #FFFEFE;

  /* accent */
  --dark-color-accent: #27849d;
  --dark-color-accent-secondary: #52b8d4;

  /* eyebrow */
  --dark-color-eyebrow: #27849d;
  
  }
}