:root {
    /* || Breakpoints */
    --bp-xxs: 390px;
    --bp-xs: 768px;
    /* --bp-sm: ; */
    --bp-md: 1280px;
    --bp-lg: 1440px;
    --bp-xl: 1600px;
    --bp-xxl: 1920px;
    --bp-xxl-wide: 2560px;
    
    /* || Color Primitives */
    --neutral-0: #FFFFFF;
    --neutral-25: #FCFCFC;
    --neutral-50: #FAFAFA;
    --neutral-100: #F0F0F0;
    --neutral-200: #E2E2E2;
    --neutral-300: #D3D3D3;
    --neutral-400: #C5C5C5;
    --neutral-500: #9E9E9E;
    --neutral-600: #777777;
    --neutral-700: #4F4F4F;
    --neutral-800: #282828;
    --neutral-900: #171717;
    --neutral-1000: #000000;
    
    --red-25: #FFF2F1;
    --red-50: #FFD9D6;
    --red-100: #FFB2AD;
    --red-200: #FF8C83;
    --red-300: #FF665A;
    --red-400: #FF4031;
    --red-500: #EB1100;
    --red-600: #CE0F00;
    --red-700: #B00D00;
    --red-800: #930B00;
    --red-900: #760900;

    --orange-25: #fffaf5;
    --orange-50: #feefe1;
    --orange-100: #fcdfc3;
    --orange-200: #fbd0a5;
    --orange-300: #f9c088;
    --orange-400: #f8b06a;
    --orange-500: #F59638;
    --orange-600: #EF7D0C;
    --orange-700: #BF640A;
    --orange-800: #8F4B07;
    --orange-900: #603205;
    
    --green-25: #EFFDF9;
    --green-50: #EFFDF9;
    --green-100: #CFF9EC;
    --green-200: #A0F3D9;
    --green-300: #70EDC6;
    --green-400: #40E7B3;
    --green-500: #118762;
    --green-600: #0e7152;
    --green-700: #0b5a41;
    --green-800: #084431;
    --green-900: #062d21;
    
    --yellow-25: #fefcf5;
    --yellow-50: #fdf6e0;
    --yellow-100: #fcedc1;
    --yellow-200: #fae4a2;
    --yellow-300: #f8dc83;
    --yellow-400: #f7d364;
    --yellow-500: #F4C430;
    --yellow-600: #e7b10c;
    --yellow-700: #b98e0a;
    --yellow-800: #8b6a07;
    --yellow-900: #5c4705;

    --blue-25: #F6F9FE;
    --blue-50: #E6EDFB;
    --blue-100: #CCDBF7;
    --blue-200: #9AB6F0;
    --blue-300: #6792E8;
    --blue-400: #356DE1;
    --blue-500: #0249D9;
    --blue-600: #012C82;
    --blue-700: #011D57;
    --blue-800: #000F2B;
    --blue-900: #000716;
    
    --violet-25: #faf9fe;
    --violet-50: #efecfd;
    --violet-100: #ded8fb;
    --violet-200: #cec5f9;
    --violet-300: #bdb2f7;
    --violet-400: #ac9ef4;
    --violet-500: #917EF1;
    --violet-600: #6247eb;
    --violet-700: #3818dd;
    --violet-800: #2a12a6;
    --violet-900: #1c0c6e;

    --success-25: #EFFDF9;
    --success-50: #EFFDF9;
    --success-100: #CFF9EC;
    --success-200: #A0F3D9;
    --success-300: #70EDC6;
    --success-400: #40E7B3;
    --success-500: #118762;
    --success-600: #0e7152;
    --success-700: #0b5a41;
    --success-800: #084431;
    --success-900: #062d21;
    
    --error-25: #faf9fe;
    --error-50: #efecfd;
    --error-100: #ded8fb;
    --error-200: #cec5f9;
    --error-300: #bdb2f7;
    --error-400: #ac9ef4;
    --error-500: #917EF1;
    --error-600: #6247eb;
    --error-700: #3818dd;
    --error-800: #2a12a6;
    --error-900: #1c0c6e;

    /* || Spacing Primitives */
    --spacing-0: 0px;
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-14: 14px;
    --spacing-16: 16px;
    --spacing-18: 18px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-28: 28px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-56: 56px;
    --spacing-64: 64px;
    --spacing-72: 72px;
    --spacing-80: 80px;
    --spacing-96: 96px;
    --spacing-112: 112px;
    --spacing-144: 144px;
    --spacing-288: 288px;


    /* || Radius Primitives */
    --radius-none: 0;
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-24: 24px;
    --radius-32: 32px;
    --radius-40: 40px;
    --radius-48: 48px;
    --radius-full: 100%;
    

    /* || Typography / Size */
    --text-10: 1rem; /* 10px */
    --text-12: 1.2rem; /* 12px */
    --text-14: 1.4rem; /* 14px */
    --text-16: 1.6rem; /* 16px */
    --text-18: 1.8rem; /* 18px */
    --text-20: 2.0rem; /* 20px */
    --text-24: 2.4rem; /* 24px */
    --text-28: 2.8rem; /* 28px */
    --text-32: 3.2rem; /* 32px */
    --text-36: 3.6rem; /* 36px */
    --text-40: 4.0rem; /* 40px */
    --text-48: 4.8rem; /* 48px */
    --text-56: 5.6rem; /* 56px */
    --text-64: 6.4rem; /* 64px */
    --text-72: 7.2rem; /* 72px */
    --text-80: 8.0rem; /* 80px */
    --text-96: 9.6rem; /* 96px */
    --text-112: 11.2rem; /* 112px */

    /* || Typography / Letter-spacing */
    --letter-spacing-n1:   -0.1em;
    --letter-spacing-n075: -0.75em;
    --letter-spacing-n05:  -0.5em;
    --letter-spacing-n025: -0.25em;
    --letter-spacing-0:     0em;
    --letter-spacing-025:   0.25em;
    --letter-spacing-05:    0.5em;
    --letter-spacing-075:   0.75em;
    --letter-spacing-1:     0.1em;

    /* || Typography / Weight */
    --weight-400: 400;
    --weight-500: 500;
    --weight-600: 600;
    --weight-700: 700;

    /* || Typography / Line-height */
    --line-height-14: 1.4rem; /* 14px */
    --line-height-16: 1.6rem; /* 16px */
    --line-height-18: 1.8rem; /* 18px */
    --line-height-20: 2rem;   /* 20px */
    --line-height-24: 2.4rem; /* 24px */
    --line-height-28: 2.8rem; /* 28px */
    --line-height-32: 3.4rem; /* 32px */
    --line-height-36: 3.6rem; /* 36px */
    --line-height-40: 4rem;   /* 40px */
    --line-height-56: 5.6rem; /* 56px */

    /* || Shadows */
    --shadow-smooth-low: 0 0 6px 0 rgba(25, 25, 25, 0.10);
    --shadow-smooth-medium: 0 1px 8px 2px rgba(25, 25, 25, 0.10);
    --shadow-smooth-high: 0 2px 10px 3px rgba(25, 25, 25, 0.10);
    --shadow-strong-low: 0 0 6px 0 rgba(25, 25, 25, 0.80);
    --shadow-strong-medium: 0 1px 8px 2px rgba(25, 25, 25, 0.80);
    --shadow-strong-high: 0 2px 15px 2px rgba(25, 25, 25, 0.80);

    /* || Elevation */
    --elevation-bottom-light-100: 0 1px 2px 0 rgba(27, 36, 44, 0.12);
    --elevation-bottom-light-200: 0 2px 2px -1px rgba(27, 36, 44, 0.04), 0 2px 8px -1px rgba(27, 36, 44, 0.08);
    --elevation-bottom-light-300: 0 2px 2px -1px rgba(27, 35, 44, 0.04), 0 8px 16px -2px rgba(27, 36, 44, 0.12);
    --elevation-bottom-light-400: 0 2px 2px -1px rgba(27, 36, 44, 0.04), 0 16px 24px -6px rgba(27, 36, 44, 0.16);
    --elevation-top-light-100: 0 -1px 2px 0 rgba(27, 36, 44, 0.12);
    --elevation-top-light-200: 0 -2px 2px -1px rgba(27, 36, 44, 0.04), 0 -2px 8px -1px rgba(27, 36, 44, 0.08);
    --elevation-top-light-300: 0 -2px 2px -1px rgba(27, 35, 44, 0.04), 0 -8px 16px -2px rgba(27, 36, 44, 0.12);
    --elevation-top-light-400: 0 -2px 2px -1px rgba(27, 36, 44, 0.04), 0 -16px 24px -6px rgba(27, 36, 44, 0.16);
    --elevation-bottom-dark-100: 0 1px 2px 0 rgba(27, 36, 44, 0.12);
    --elevation-bottom-dark-200: 0 2px 2px -1px rgba(27, 36, 44, 0.04), 0 2px 8px -1px rgba(27, 36, 44, 0.08);
    --elevation-bottom-dark-300: 0 2px 2px -1px rgba(27, 35, 44, 0.04), 0 8px 16px -2px rgba(27, 36, 44, 0.12);
    --elevation-bottom-dark-400: 0 2px 2px -1px rgba(27, 36, 44, 0.04), 0 16px 24px -6px rgba(27, 36, 44, 0.16);
    --elevation-top-dark-100: 0 -1px 2px 0 rgba(27, 36, 44, 0.12);
    --elevation-top-dark-200: 0 -2px 2px -1px rgba(27, 36, 44, 0.04), 0 -2px 8px -1px rgba(27, 36, 44, 0.08);
    --elevation-top-dark-300: 0 -2px 2px -1px rgba(27, 35, 44, 0.04), 0 -8px 16px -2px rgba(27, 36, 44, 0.12);
    --elevation-top-dark-400: 0 -2px 2px -1px rgba(27, 36, 44, 0.04), 0 -16px 24px -6px rgba(27, 36, 44, 0.16);

}