:root {
    /* primary colors */
    --color-pri-90: #1B1227;
    --color-pri-80: #2E1F44;
    --color-pri-70: #412B5F;
    --color-pri-60: #53377B;
    --color-pri-50: #664496;
    --color-pri-40: #8367AA;
    --color-pri-30: #9E89BD;
    --color-pri-20: #BBACD0;
    --color-pri-10: #D7CEE3;
    --color-pri-05: #F2F0F6;
    
    /* secondary colors */
    --color-sec-90: #09101A;
    --color-sec-80: #0F1B2D;
    --color-sec-70: #15253E;
    --color-sec-60: #1A3050;
    --color-sec-50: #203B62;
    --color-sec-40: #475D7D;
    --color-sec-30: #73849D;
    --color-sec-20: #9AA7B8;
    --color-sec-10: #C3CAD5;
    --color-sec-05: #E9ECF0;

    /* gray colors */
    --color-gray-100: #000;
    --color-gray-90: #1D1D1D;
    --color-gray-80: #2D2D2D;
    --color-gray-70: #555555;
    --color-gray-60: #717171;
    --color-gray-50: #8E8E8E;
    --color-gray-40: #C6C6C6;
    --color-gray-30: #D8D8D8;
    --color-gray-20: #E4E4E4;
    --color-gray-10: #F0F0F0;
    --color-gray-05: #F8F8F8;
    --color-gray-0: #FFF;

    /* font weights */
    --font-main: 'Suit', -apple-system, BlinkMacSystemFont, sans-serif;
    --fw-r: 400;
    --fw-m: 500;
    --fw-sb: 600;
    --fw-b: 700;
    --fw-eb: 800;
    --lineheight15: 1.5;
    --lineheight17: 1.7;

    /* font sizes */
    --fs-display: 50px;
    --fs-heading: 44px;
    --fs-title-xl: 32px;
    --fs-title-lg: 24px;
    --fs-title-md: 20px;
    --fs-body-md: 16px;
    --fs-body-sm: 14px;
    --fs-detail: 12px;

    /* spacing */
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-28: 28px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-44: 44px;
    --spacing-60: 60px;
    --spacing-64: 64px;
    --spacing-80: 80px;
    --spacing-100: 100px;

    /* border */
    --border-05: 0.5px;
    --border-1: 1px;
    --border-2: 2px;
    --border-color-wh: #ffffff;
    --border-color-pup: #2E1F44;
}