// ======   Base

       $whiteclr: #ffffff;
       $blackclr: #000000;

// ======   Gray

    /*Gray is a neutral color and is the foundation of the color
    system.Almost everything in UI design — text, form
    fields, backgrounds, dividers — are usually gray.*/

       $gray25:  #FCFCFD;
       $gray50:  #F9FAFB;
       $gray100: #F2F4F7;
       $gray200: #EAECF0;
       $gray300: #D0D5DD;
       $gray400: #98A2B3;
       $gray500: #667085;
       $gray600: #475467;
       $gray700: #344054;
       $gray900: #101828;

// ======  Primary

   /*The primary color is our "brand" color, and is used
   across all interactive elements such as buttons, links,
   inputs, etc. This color can define the overall feel and
   emotion.*/

       $pri25:  #F4FBFF;
       $pri50:  #B0E3F9;
       $pri100: #B0E3F9;
       $pri200: #7BD0F5;
       $pri300: #44BFF0;
       $pri400: #14AFED;
       $pri500: #00A5EC;
       $pri600: #0097DD;
       $pri700: #0083CA;
       $pri800: #0073B6;
       $pri900: #005494;
       

// ======  Success

    /*Success colors communicate a positive action, postive
    trend, or a successful confirmation.*/

       $success25: #F6FEF9;
       $success50: #ECFDF3;
       $success100:#D1FADF;
       $success200:#A6F4C5;
       $success300:#6CE9A6;
       $success400:#32D583;
       $success500:#12B76A;
       $success600:#039855;
       $success700:#027A48;
       $success800:#05603A;
       $success900:#054F31;

// ======  Warning

    /*Warning colors can communicate that an action is
    potentially destructive or "on-hold". These colors are
    commonly used in confirmations to grab the users'
    attention.*/

       $warn25: #FFFCF5;
       $warn50: #FFFAEB;
       $warn100:#FEF0C7;
       $warn200:#FEDF89;
       $warn300:#FEC84B;
       $warn400:#FDB022;
       $warn500:#F79009;
       $warn600:#DC6803;
       $warn700:#B54708;
       $warn800:#93370D;
       $warn900:#7A2E0E;

// ======  Error

    /*These colors convey an emotion of negativity.
     Generally used across error states.*/

       $error25:  #FFFBFA;
       $error50:  #FEF3F2;
       $error100: #FEE4E2;
       $error200: #FECDCA;
       $error300: #FDA29B;
       $error400: #F97066;
       $error500: #F04438;
       $error600: #D92D20;
       $error700: #B42318;
       $error800: #912018;
       $error800: #7A271A;

// ======  Orange

       $org25: #FFFCFC;
       $org50: #F9E9E6;
       $org100:#FACCB9;
       $org200:#F7AB8B;
       $org300:#F48B5D;
       $org400:#F27239;
       $org500:#EF5C0F;
       $org600:#E5560B;
       $org700:#D74F05;
       $org800:#CA4803;
       $org900:#B13C00;

// ======  Teal

       $teal25: #F3FAF8;
       $teal50: #DDF6F1;
       $teal100:#ACE8DB;
       $teal200:#70DAC4;
       $teal300:#03CAAC;
       $teal400:#00BC99;
       $teal500:#00AE88;
       $teal600:#00A07A;
       $teal700:#008F6A;
       $teal800:#007E5B;
       $teal900:#00613E;

// ======   Indigo

       $indigo25: #FBF9FF;
       $indigo50: #EEE6FF;
       $indigo100:#D2C2FD;
       $indigo200:#B39AFD;
       $indigo300:#916EFF;
       $indigo400:#714CFE;
       $indigo500:#4A26FD;
       $indigo600:#3722F6;
       $indigo700:#021AEE;
       $indigo800:#0013E9;
       $indigo900:#0000E4;

// ======   Pink

       $pink25: #FDF7FB;
       $pink50: #FAE6F3;
       $pink100:#F3BEE2;
       $pink200:#F094CD;
       $pink300:#EE68B8;
       $pink400:#EE43A5;
       $pink500:#F21791;
       $pink600:#DF158C;
       $pink700:#C81484;
       $pink800:#B1147D;
       $pink900:#8A1372;