@layer theme {
  :root {
    color-scheme: light dark;
    background-color: var(--bg-primary);
    color: var(--text-tertiary);
    font-family: Inter, system-ui, sans-serif;
    font-size: 1rem;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
  } 
} /* end of @layer theme */

@layer theme.fonts {
  /* The Roman styles */
  @font-face {
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

    /* The italic styles */
  @font-face {
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
  }

} /* end of @layer theme.fonts */

@layer theme.colors {
  :root {
    /* The theme colors */
    --base-color: #6941C6;
    --text-brand-secondary: light-dark(var(--base-color), #CECFD2);
    --text-primary: light-dark(#181D27, #F7F7F7);
    --text-secondary: light-dark(#414651, #CECFD2);
    --text-tertiary: light-dark(#535862, #94979C);
    --text-white: light-dark(#fff, #fff);
    --fg-quaternary: light-dark(#A4A7AE, #61656C);
    --bg-primary: light-dark(#FFFFFF, #0C0E12);
    /* Labels */
    --utility-brand-700: light-dark(#6941C6, #D6BBFB);
    --utility-brand-200: light-dark(#E9D7FE, #53389E);
    --utility-brand-50: light-dark(#F9F5FF, #2C1C5F);
    --utility-indigo-700: light-dark(#3538CD, #A4BCFD);
    --utility-indigo-200: light-dark(#C7D7FE, #2D31A6);
    --utility-indigo-50: light-dark(#EEF4FF, #1F235B);
    --utility-blue-light-700: light-dark(#026AA2, #7CD4FD);
    --utility-blue-light-200: light-dark(#B9E6FE, #065986);
    --utility-blue-light-50: light-dark(#F0F9FF, #062C41);
    --utility-gray-blue-700: light-dark(#363F72, #B3B8DB);
    --utility-gray-blue-200: light-dark(#D5D9EB, #293056);
    --utility-gray-blue-50: light-dark(#F8F9FC, #0D0F1C);
    --utility-purple-700: light-dark(#5925DC, #BDB4FE);
    --utility-purple-200: light-dark(#D9D6FE, #4A1FB8);
    --utility-purple-50: light-dark(#F4F3FF, #27115F);
    --utility-pink-700: light-dark(#C11574, #FAA7E0);
    --utility-pink-200: light-dark(#FCCEEE, #9E165F);
    --utility-pink-50: light-dark(#FDF2FA, #4E0D30);
    --utility-orange-700: light-dark(#B93815, #F7B27A);
    --utility-orange-200: light-dark(#F9DBAF, #932F19);
    --utility-orange-50: light-dark(#FEF6EE, #511C10);
  } /* end of the root */
    
  } /* end of @layer theme.colors */