/* Primitives */
:root {
    /* Pallete */
    /* color */
    --colors-blue-100: #e9f2ff;
    --colors-blue-1000: #1c2b41;
    --colors-blue-200: #cce0ff;
    --colors-blue-300: #85b8ff;
    --colors-blue-400: #579dff;
    --colors-blue-500: #388bff;
    --colors-blue-600: #1d7afc;
    --colors-blue-700: #0c66e4;
    --colors-blue-800: #0055cc;
    --colors-blue-900: #09326c;
    --colors-green-100: #dcfff1;
    --colors-green-1000: #1c3329;
    --colors-green-200: #baf3db;
    --colors-green-300: #7ee2b8;
    --colors-green-400: #4bce97;
    --colors-green-500: #2abb7f;
    --colors-green-600: #22a06b;
    --colors-green-700: #1f845a;
    --colors-green-800: #216e4e;
    --colors-green-900: #164b35;
    --colors-lime-100: #efffd6;
    --colors-lime-1000: #28311b;
    --colors-lime-200: #d3f1a7;
    --colors-lime-300: #b3df72;
    --colors-lime-400: #94c748;
    --colors-lime-500: #82b536;
    --colors-lime-600: #6a9a23;
    --colors-lime-700: #5b7f24;
    --colors-lime-800: #4c6b1f;
    --colors-lime-900: #37471f;
    --colors-magenta-100: #ffecf8;
    --colors-magenta-1000: #3d2232;
    --colors-magenta-200: #fdd0ec;
    --colors-magenta-300: #f797d2;
    --colors-magenta-400: #e774bb;
    --colors-magenta-500: #da62ac;
    --colors-magenta-600: #cd519d;
    --colors-magenta-700: #ae4787;
    --colors-magenta-800: #943d73;
    --colors-magenta-900: #50253f;
    --colors-neutral---dark--100: #101214;
    --colors-neutral---dark-0: #161a1d;
    --colors-neutral---dark-100: #1d2125;
    --colors-neutral---dark-1000: #c7d1db;
    --colors-neutral---dark-1100: #dee4ea;
    --colors-neutral---dark-200: #22272b;
    --colors-neutral---dark-300: #2c333a;
    --colors-neutral---dark-400: #454f59;
    --colors-neutral---dark-500: #596773;
    --colors-neutral---dark-600: #738496;
    --colors-neutral---dark-700: #8c9bab;
    --colors-neutral---dark-800: #9fadbc;
    --colors-neutral---dark-900: #b6c2cf;
    --colors-neutral---light-0: #ffffff;
    --colors-neutral---light-100: #f7f8f9;
    --colors-neutral---light-1000: #172b4d;
    --colors-neutral---light-1100: #091e42;
    --colors-neutral---light-200: #f1f2f4;
    --colors-neutral---light-300: #dcdfe4;
    --colors-neutral---light-400: #b3b9c4;
    --colors-neutral---light-500: #8590a2;
    --colors-neutral---light-600: #758195;
    --colors-neutral---light-700: #626f86;
    --colors-neutral---light-800: #44546f;
    --colors-neutral---light-900: #2c3e5d;
    --colors-orange-100: #fff3eb;
    --colors-orange-1000: #38291e;
    --colors-orange-200: #fedec8;
    --colors-orange-300: #fec195;
    --colors-orange-400: #fea362;
    --colors-orange-500: #f38a3f;
    --colors-orange-600: #e56910;
    --colors-orange-700: #c25100;
    --colors-orange-800: #a54800;
    --colors-orange-900: #702e00;
    --colors-purple-100: #f3f0ff;
    --colors-purple-1000: #2b273f;
    --colors-purple-200: #dfd8fd;
    --colors-purple-300: #b8acf6;
    --colors-purple-400: #9f8fef;
    --colors-purple-50: #f1f0ff;
    --colors-purple-500: #8f7ee7;
    --colors-purple-600: #8270db;
    --colors-purple-700: #6e5dc6;
    --colors-purple-800: #5e4db2;
    --colors-purple-900: #352c63;
    --colors-red-100: #ffeceb;
    --colors-red-1000: #42221f;
    --colors-red-200: #ffd5d2;
    --colors-red-300: #fd9891;
    --colors-red-400: #f87168;
    --colors-red-500: #f15b50;
    --colors-red-600: #e2483d;
    --colors-red-700: #c9372c;
    --colors-red-800: #ae2e24;
    --colors-red-900: #5d1f1a;
    --colors-teal-100: #e7f9ff;
    --colors-teal-1000: #1e3137;
    --colors-teal-200: #c6edfb;
    --colors-teal-300: #9dd9ee;
    --colors-teal-400: #6cc3e0;
    --colors-teal-500: #42b2d7;
    --colors-teal-600: #2898bd;
    --colors-teal-700: #227d9b;
    --colors-teal-800: #206a83;
    --colors-teal-900: #164555;
    --colors-yellow-100: #fff7d6;
    --colors-yellow-1000: #332e1b;
    --colors-yellow-200: #f8e6a0;
    --colors-yellow-300: #f5cd47;
    --colors-yellow-400: #e2b203;
    --colors-yellow-500: #cf9f02;
    --colors-yellow-600: #b38600;
    --colors-yellow-700: #946f00;
    --colors-yellow-800: #7f5f01;
    --colors-yellow-900: #533f04;
    /* number */
    --radius-0x: 0px;
    --radius-05-x: 4px;
    --radius-1x: 8px;
    --radius-15-x: 12px;
    --radius-2x: 16px;
    --radius-3x: 24px;
    --radius-50: 500px;
    --spacing-0x: 0px;
    --spacing-05-x: 4px;
    --spacing-1x: 8px;
    --spacing-15-x: 12px;
    --spacing-2x: 16px;
    --spacing-3x: 24px;
    --spacing-4x: 32px;
    --spacing-5x: 40px;
    --spacing-8x: 64px;
    --spacing-10x: 80px;
    --spacing-15x: 120px;
}

/* Colors */
:root {
    /* Light */
    /* color */
    --accent-primary: var(--colors-purple-700);
    --accent-secondary: var(--colors-purple-50);
    --action-primary: var(--colors-blue-700);
    --action-secondary: var(--colors-blue-100);
    --components-divider-light: #ffffff1a;
    --dialogue-error: var(--colors-red-700);
    --dialogue-success: var(--colors-green-700);
    --dialogue-warning: var(--colors-yellow-400);
    --surface-1: var(--colors-neutral---light-0);
    --surface-2: var(--colors-neutral---light-200);
    --surface-3: var(--colors-neutral---light-300);
    --surface-4: var(--colors-neutral---light-400);
    --text-contrast: var(--colors-neutral---light-0);
    --text-placeholder: #bdbdbd;
    --text-primary: #242424;
    --text-secondary: #828282;
}

/* Typography */
:root {
    /* number */
    --font-line-height-2xs: 16px;
    --font-line-height-xs: 20px;
    --font-line-height-sm: 24px;
    --font-line-height-md: 32px;
    --font-line-height-lg: 40px;
    --font-line-height-xl: 48px;
    --font-line-height-2xl: 56px;
    --font-size-xs: 12px;
    --font-size-sm: 16px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;
    --font-size-4xl: 56px;
    --font-size-5xl: 72px;
    /* string */
    --font-family-body: Onest;
    --font-family-title: Onest;
    --font-weight-bold: bold;
    --font-weight-medium: medium;
    --font-weight-regular: regular;
    --font-weight-semibold: semibold;
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        /* number */
        --font-line-height-2xs: 12px;
        --font-line-height-xs: 16px;
        --font-line-height-md: 24px;
        --font-line-height-sm: 24px;
        --font-line-height-lg: 32px;
        --font-line-height-2xl: 40px;
        --font-line-height-xl: 40px;
        --font-size-xs: 12px;
        --font-size-sm: 14px;
        --font-size-md: 16px;
        --font-size-lg: 18px;
        --font-size-xl: 20px;
        --font-size-2xl: 24px;
        --font-size-3xl: 32px;
        --font-size-4xl: 40px;
        --font-size-5xl: 48px;
        /* string */
        --font-family-body: Onest;
        --font-family-title: Onest;
        --font-weight-bold: bold;
        --font-weight-medium: medium;
        --font-weight-regular: regular;
        --font-weight-semibold: semibold;
    }
}