@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Outfit:wght@100..900&display=swap');

@import "tailwindcss";

@plugin 'tailwind-scrollbar' {
    nocompatible: true;
    preferredStrategy: 'pseudoelements';
}

@theme {

  /* COLOR VARIABLES */

  --color-primary-15:  #FFFCF0;
  --color-primary-30:  #FFF9E1;
  --color-primary-50:  #FFF7D7;
  --color-primary-100: #FFF3C0;
  --color-primary-200: #FFEEAA;
  --color-primary-300: #FFEA92;
  --color-primary-400: #FFE57B;
  --color-primary-500: #FFE165;
  --color-primary-600: #DCC257;
  --color-primary-700: #BBA54A;
  --color-primary-800: #99873D;
  --color-primary-900: #76682F;
  --color-primary-950: #534921;
  --color-primary-970: #433B1B;
  --color-primary-985: #2D2812;

  /* Light Neutral */
  --color-light-neutral-15: #F7F8FB;
  --color-light-neutral-30: #F0F2F7;
  --color-light-neutral-50: #EBEDF3;
  --color-light-neutral-100: #DFE2ED;
  --color-light-neutral-200: #D4D8E7;
  --color-light-neutral-300: #C8CDE0;
  --color-light-neutral-400: #BCC3D9;
  --color-light-neutral-500: #B1B9D3;
  --color-light-neutral-600: #99A0B6;
  --color-light-neutral-700: #82889B;
  --color-light-neutral-800: #6A6F7F;
  --color-light-neutral-900: #525662;
  --color-light-neutral-950: #3A3C45;
  --color-light-neutral-970: #2F3137;
  --color-light-neutral-985: #1F2125;

  /* Grey */
  --color-grey-15: #EDEDEF;
  --color-grey-30: #DCDDDF;
  --color-grey-50: #CFD0D3;
  --color-grey-100: #B5B6BA;
  --color-grey-200: #9A9CA2;
  --color-grey-300: #7E8088;
  --color-grey-400: #63666F;
  --color-grey-500: #494C57;
  --color-grey-600: #3F424B;
  --color-grey-700: #363840;
  --color-grey-800: #2C2E34;
  --color-grey-900: #222328;
  --color-grey-950: #18191C;
  --color-grey-970: #131417;
  --color-grey-985: #0D0D0F;

  /* Green */
  --color-green-15: #F8FFF4;
  --color-green-30: #F2FFE9;
  --color-green-50: #EDFFE1;
  --color-green-100: #E4FFD0;
  --color-green-200: #DAFFBF;
  --color-green-300: #CFFFAD;
  --color-green-400: #C6FF9D;
  --color-green-500: #BCFF8C;
  --color-green-600: #A2DC79;
  --color-green-700: #8ABB67;
  --color-green-800: #719954;
  --color-green-900: #577641;
  --color-green-950: #3D532E;
  --color-green-970: #314325;
  --color-green-985: #212D19;

  /* Aqua */
  --color-aqua-15: #F4FFFE;
  --color-aqua-30: #E9FFFE;
  --color-aqua-50: #E1FFFD;
  --color-aqua-100: #D1FFFD;
  --color-aqua-200: #C0FFFC;
  --color-aqua-300: #AEFFFB;
  --color-aqua-400: #9EFFFA;
  --color-aqua-500: #8DFFF9;
  --color-aqua-600: #7ADCD7;
  --color-aqua-700: #67BBB7
  --color-aqua-800: #559995;
  --color-aqua-900: #417673;
  --color-aqua-950: #2E5351;
  --color-aqua-970: #254341;
  --color-aqua-985: #192D2C;

  /* Red */
  --color-red-15: #FFF0EE;
  --color-red-30: #FFE2DD;
  --color-red-50: #FFD7D0;
  --color-red-100: #FFC1B7;
  --color-red-200: #FFAC9D;
  --color-red-300: #FF9481;
  --color-red-400: #FF7E68;
  --color-red-500: #FF684E;
  --color-red-600: #DC5A43;
  --color-red-700: #BB4C39;
  --color-red-800: #993E2F;
  --color-red-900: #763024;
  --color-red-950: #532219;
  --color-red-970: #431B14;
  --color-red-985: #2D120E;

  /* OpacityBlue */
  --color-blue: #DCE5FF;

  /* TYPOGRAPHY VARIABLES */

 
  --font-size-xxs: 0.75rem;   /* 12px */
  --font-size-xs:  0.875rem;  /* 14px */
  --font-size-s:   1rem;      /* 16px */
  --font-size-m:   1.125rem;  /* 18px */
  --font-size-l:   1.5rem;    /* 24px */
  --font-size-xl:  2rem;      /* 32px */
  --font-size-xxl: 2.25rem;   /* 36px */
  --font-size-xxxl:  3rem;      /* 48px */

}

@layer utilities {
  .tg-family-outfit {
    font-family: Outfit;
    
  }
  .tg-family-ibm-plex {
    font-family:  IBM Plex Mono
  }

  .tg-xxs {
    font-size: var(--font-size-xxs);
  }
  .tg-xs {
    font-size: var(--font-size-xs);
  }

  .tg-s {
    font-size: var(--font-size-s);
  }

  .tg-m {
    font-size: var(--font-size-m);
  }

  .tg-lg {
    font-size: var(--font-size-l);
  }

  .tg-xl {
    font-size: var(--font-size-xl);
  }
  .tg-xxl {
    font-size: var(--font-size-xxl);
  }
  .tg-xxxl {
    font-size: var(--font-size-xxxl);
  }
}