:root {
    /* ==================================== COLOR SCHEME ==================================== */
    --color-primary: #390077;
    --color-secondary: #26014E;
    --dullPurple: #5D4E6E;
    --color-soft: #EEEBFF;
    --soft-purple: #E0DCF7;
    --smog-color: #dbdbdb;
    --white: #ffffff;
    --whiteSmoke: #f8f8f8;
    --grey: #dddddd;
    --greyLight: #cccccc;
    --darkGrey: #777777;
    --blackcurrant: #1c1434;
    --black: #000000;
    --orange: #ff6600;
    --darkOrange: #DE6803;
    --red: #f00;
    --green: #54c359;
    --light-yellow: #fffad4;
    --lightRed: #ff9393;
    --crowning: #5D4E6E;
    --darkCharcoal: #333333;
    --dashBgColor: #faf7ff;
    --darkYelow: #c1bb85;
    --yelow: #fffad4;
    /*
        #f5f2fa;
        #777777
        #DE6803
        #D91414
        #dbdbdb
        #99BF0E;
    */
    /* Used as a color for general content */
    --surface-text: #121212;
    
    /* Used as a primary border-color */
    --pchase-border: #B1AAB9;
    
    /* Font Weight */
    --fw-thin: 300;
    --fw-regular: 400;
    --fw-bold: 700;
    --fw-black: 900;
    
    /* ==================================== Font Size ==================================== */
    
    --fs-notify: 9px;
    --fs-badge-info: 12px;
    --fs-badge: 14px;
    --fs-body: 16px;
    --fs-caption: 18px;
    --fs-subtitle: 20px;
    --fs-title: 24px;
    --fs-heading: 32px;
    --fs-display: 40px;
    --fs-hero: 56px;
    --font-family: lato, sans-serif;
    
    /* ==================================== SPACING ==================================== */
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    
    
    /* ==================================== BORDER RADIUS ==================================== */
    --radius: 4px;
    --btn-radius: 8px;
    --input-radius: 8px;
    --card-radius: 12px;
    --circle-radius: 100px;
    

  --gradient: linear-gradient(90deg, #390077 0%, #5C229C 48.96%, #8B4DCF 100%);
    
    /* ==================================== SHADOWS ==================================== */

    --shadow-table: #3900770d;
    --shadow-card: 0px 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-sidemenu: 0px 4px 8px rgba(0, 0, 0, 0.12);
    --shadow: #39007726;
    --sidepanel: 0px 20px 30px rgba(70, 48, 125, 0.15);
    
    
    /* ==================================== TRANSITIONS ==================================== */
    --transition-fast: all 150ms ease-in-out;
    --transition-default: all 300ms ease-in-out;
    --transition-slow: all 500ms ease-in-out;
    
    
    /* ==================================== LINE HEIGHT ==================================== */
    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.75;
    --lh-loose: 2;
}