/*!
Wallex Token Style
Version: 1.0.5
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Root
	- Typography
    - Colors
    - Spacing
    - Stroke
    - Corner Radius
    - Shadow
# Light
# Dark
--------------------------------------------------------------*/

:root {
    /**
     * Typography
     */
    --caption-small-size: 10px;
    --caption-small-line-height: 16px;

    --caption-small-regular-weight: 400;
    --caption-small-medium-weight: 500;
    --caption-small-strong-weight: 700;
    --caption-small-heavy-weight: 950;


    --caption-size: 12px;
    --caption-line-height: 20px;

    --caption-regular-weight: 400;
    --caption-medium-weight: 500;
    --caption-strong-weight: 700;
    --caption-heavy-weight: 950;


    --body-size: 14px;
    --body-line-height: 24px;

    --body-light-weight: 200;
    --body-regular-weight: 400;
    --body-medium-weight: 500;
    --body-strong-weight: 700;
    --body-heavy-weight: 950;


    --body-large-size: 16px;
    --body-large-line-height: 28px;

    --body-large-light-weight: 200;
    --body-large-regular-weight: 400;
    --body-large-medium-weight: 500;
    --body-large-strong-weight: 700;
    --body-large-heavy-weight: 950;


    --headline-size: 20px;
    --headline-line-height: 36px;

    --headline-light-weight: 200;
    --headline-regular-weight: 400;
    --headline-medium-weight: 500;
    --headline-strong-weight: 700;
    --headline-heavy-weight: 950;


    --title-size: 24px;
    --title-line-height: 40px;

    --title-light-weight: 200;
    --title-regular-weight: 400;
    --title-medium-weight: 500;
    --title-strong-weight: 700;
    --title-heavy-weight: 950;


    --display-size: 32px;
    --display-line-height: 48px;

    --display-light-weight: 200;
    --display-regular-weight: 400;
    --display-medium-weight: 500;
    --display-strong-weight: 700;
    --display-heavy-weight: 950;

    /**
     * Colors
     */
    --color-primary-990: #FAFCFF;
    --color-primary-975: #F2F8FF;
    --color-primary-950: #E5F2FF;
    --color-primary-900: #CCE4FF;
    --color-primary-850: #B2D7FF;
    --color-primary-800: #99CAFF;
    --color-primary-750: #80BCFF;
    --color-primary-700: #66AFFF;
    --color-primary-650: #4DA2FF;
    --color-primary-600: #3395FF;
    --color-primary-550: #1A87FF;
    --color-primary-500: #007AFF;
    --color-primary-450: #0270E8;
    --color-primary-400: #0366D2;
    --color-primary-350: #055CBB;
    --color-primary-300: #0752A5;
    --color-primary-250: #09488E;
    --color-primary-200: #0A3E77;
    --color-primary-150: #0C3461;
    --color-primary-100: #0E2A4A;
    --color-primary-50: #111822;

    --color-glass-primary-90: #007AFFE5;
    --color-glass-primary-80: #007AFFCC;
    --color-glass-primary-70: #007AFFB2;
    --color-glass-primary-60: #007AFF99;
    --color-glass-primary-50: #007AFF80;
    --color-glass-primary-40: #007AFF66;
    --color-glass-primary-30: #007AFF4D;
    --color-glass-primary-20: #007AFF33;
    --color-glass-primary-10: #007AFF1A;
    --color-glass-primary-5: #007AFF0D;
    --color-glass-primary-2: #007AFF05;

    --color-neutral-white: #FFFFFF;
    --color-neutral-990: #FCFCFC;
    --color-neutral-975: #F7F7F7;
    --color-neutral-950: #EFEFEF;
    --color-neutral-900: #DEDEDE;
    --color-neutral-850: #CECECE;
    --color-neutral-800: #BEBEBE;
    --color-neutral-750: #ADADAD;
    --color-neutral-700: #9D9D9D;
    --color-neutral-650: #8D8D8D;
    --color-neutral-600: #7C7C7C;
    --color-neutral-550: #6C6C6C;
    --color-neutral-500: #5B5B5B;
    --color-neutral-450: #535353;
    --color-neutral-400: #494949;
    --color-neutral-350: #404040;
    --color-neutral-300: #373737;
    --color-neutral-250: #2E2E2E;
    --color-neutral-200: #252525;
    --color-neutral-150: #1C1C1C;
    --color-neutral-100: #121212;
    --color-neutral-50: #090909;
    --color-neutral-black: #000000;

    --color-glass-white-90: #FFFFFFE5;
    --color-glass-white-80: #FFFFFFCC;
    --color-glass-white-70: #FFFFFFB2;
    --color-glass-white-60: #FFFFFF99;
    --color-glass-white-50: #FFFFFF80;
    --color-glass-white-40: #FFFFFF66;
    --color-glass-white-30: #FFFFFF4D;
    --color-glass-white-20: #FFFFFF33;
    --color-glass-white-10: #FFFFFF1A;
    --color-glass-white-5: #FFFFFF0D;
    --color-glass-white-2: #FFFFFF05;
    --color-glass-white-0: #FFFFFF00;

    --color-glass-black-90: #000000E5;
    --color-glass-black-80: #000000CC;
    --color-glass-black-70: #000000B2;
    --color-glass-black-60: #00000099;
    --color-glass-black-50: #00000080;
    --color-glass-black-40: #00000066;
    --color-glass-black-30: #0000004D;
    --color-glass-black-20: #00000033;
    --color-glass-black-10: #0000001A;
    --color-glass-black-5: #0000000D;
    --color-glass-black-2: #00000005;
    --color-glass-black-0: #00000000;

    --color-dim-blue-990: #FBFBFC;
    --color-dim-blue-975: #F5F6F7;
    --color-dim-blue-950: #EBEDEF;
    --color-dim-blue-900: #D7DADF;
    --color-dim-blue-850: #C4C8CF;
    --color-dim-blue-800: #B0B6BF;
    --color-dim-blue-750: #9CA3AF;
    --color-dim-blue-700: #8891A0;
    --color-dim-blue-650: #747F90;
    --color-dim-blue-600: #616D80;
    --color-dim-blue-550: #4D5A70;
    --color-dim-blue-500: #394860;
    --color-dim-blue-450: #334156;
    --color-dim-blue-400: #2E3A4D;
    --color-dim-blue-350: #283243;
    --color-dim-blue-300: #222B3A;
    --color-dim-blue-250: #1D2430;
    --color-dim-blue-200: #171D26;
    --color-dim-blue-150: #11161D;
    --color-dim-blue-100: #0B0E13;
    --color-dim-blue-50: #06070A;

    --color-green-990: #FAFEFD;
    --color-green-975: #F2FBF9;
    --color-green-950: #E5F8F3;
    --color-green-900: #CCF1E8;
    --color-green-850: #B2EADC;
    --color-green-800: #99E3D0;
    --color-green-700: #66D4B9;
    --color-green-600: #33C6A1;
    --color-green-500: #00B88A;
    --color-green-400: #039874;
    --color-green-300: #07775E;
    --color-green-200: #0A5749;
    --color-green-100: #0E3633;
    --color-green-50: #0F2628;

    --color-yellow-950: #FDF8EB;
    --color-yellow-900: #FCF2D8;
    --color-yellow-800: #F9E5B1;
    --color-yellow-700: #F5D789;
    --color-yellow-600: #F2CA62;
    --color-yellow-500: #EFBD3B;
    --color-yellow-400: #C39C35;
    --color-yellow-300: #967A2F;
    --color-yellow-200: #6A5929;
    --color-yellow-100: #3D3723;
    --color-yellow-50: #272720;

    --color-amber-900: #FFEECC;
    --color-amber-800: #FFDD99;
    --color-amber-700: #FFCC66;
    --color-amber-600: #FFBB33;
    --color-amber-500: #FFAA00;
    --color-amber-400: #CF8C06;
    --color-amber-300: #A06F0C;
    --color-amber-200: #705111;
    --color-amber-100: #413417;

    --color-red-990: #FFFCFC;
    --color-red-975: #FFF6F6;
    --color-red-950: #FEEEEE;
    --color-red-900: #FDDDDD;
    --color-red-800: #FBBBBB;
    --color-red-700: #FA9999;
    --color-red-600: #F87777;
    --color-red-500: #F65555;
    --color-red-400: #C8484A;
    --color-red-300: #9A3C3F;
    --color-red-200: #6D2F33;
    --color-red-150: #56292E;
    --color-red-100: #3F2328;
    --color-red-50: #281C23;
    --color-red-25: #1C1920;


    /**
     * Spacing
     */
    --spacingNone: 0px;
    --spacingXXXS: 2px;
    --spacingXXS: 4px;
    --spacingXS: 8px;
    --spacingS: 12px;
    --spacingM: 16px;
    --spacingMNudge: 20px;
    --spacingL: 24px;
    --spacingXL: 32px;
    --spacingXXL: 40px;
    --spacingXXXL: 48px;


    /**
     * Stroke
     */
    --strokeNone: 0px;
    --strokeThin: 1px;
    --strokeThick: 2px;
    --strokeThicker: 4px;


    /**
     * Corner Radius
     */
    --cornerRadiusNone: 0px;
    --cornerRadiusXS: 2px;
    --cornerRadiusS: 4px;
    --cornerRadiusSNudge: 6px;
    --cornerRadiusM: 8px;
    --cornerRadiusMNudge: 10px;
    --cornerRadiusL: 12px;
    --cornerRadiusXL: 16px;
    --cornerRadiusCircular: 1000px;


    /**
     * Shadow
     */
    --box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 24px 58px rgba(0, 0, 0, 0.28);
}



:root[theme-mode="light"] {

    --color-text-1: var(--color-neutral-200);
    --color-text-2: var(--color-glass-black-60);
    --color-text-3: var(--color-glass-black-40);
    --color-text-4: var(--color-glass-black-20);

    --color-onNegativeText: var(--color-neutral-white);
    --color-onNegativeText-2: var(--color-glass-white-60);

    --color-primaryBrandText: var(--color-primary-500);
    --color-primaryBrandText-2: var(--color-primary-650);

    --color-onColorLightText: var(--color-neutral-white);
    --color-onColorLightText-2: var(--color-glass-white-80);
    --color-onColorLightText-3: var(--color-glass-white-60);

    --color-onColorDarkText: var(--color-neutral-200);
    --color-onColorDarkText-2: var(--color-glass-black-60);
    --color-onColorDarkText-3: var(--color-glass-black-40);

    --color-approveText: var(--color-green-400);
    --color-approveText-2: var(--color-green-600);

    --color-warningText: var(--color-amber-300);
    --color-warningText: var(--color-amber-500);

    --color-criticalText: var(--color-red-500);
    --color-criticalText-2: var(--color-red-700);


    --color-bg: var(--color-neutral-white);
    --color-bg-2: var(--color-dim-blue-990);
    --color-bg-3: var(--color-dim-blue-975);
    --color-bg-4: var(--color-dim-blue-900);

    --color-glassBg: var(--color-glass-white-10);
    --color-glassBg-2: var(--color-glass-white-70);
    --color-glassBg-3: var(--color-glass-white-90);

    --color-negativeGlassBg: var(--color-glass-black-2);
    --color-negativeGlassBg-2: var(--color-glass-black-5);

    --color-onColorGlassBg: var(--color-glass-white-10);

    --color-negativeBg: var(--color-dim-blue-200);
    --color-negativeBg-2: var(--color-dim-blue-300);

    --color-primaryBrandBg: var(--color-primary-500);
    --color-primaryBrandBg-2: var(--color-primary-600);
    --color-primaryBrandBg-3: var(--color-primary-800);
    --color-primaryBrandBg-4: var(--color-primary-950);
    --color-primaryBrandBg-5: var(--color-primary-975);

    --color-primaryBrandGlassBg: var(--color-glass-primary-5);
    --color-primaryBrandGlassBg: var(--color-glass-primary-10);

    --color-approveBg: var(--color-green-500);
    --color-approveBg-2: var(--color-green-600);
    --color-approveBg-3: var(--color-green-950);
    --color-approveBg-4: var(--color-green-975);

    --color-warningBg: var(--color-yellow-500);
    --color-warningBg-2: var(--color-yellow-900);
    --color-warningBg-3: var(--color-yellow-950);

    --color-criticalBg: var(--color-red-500);
    --color-criticalBg-2: var(--color-red-600);
    --color-criticalBg-3: var(--color-red-950);
    --color-criticalBg-4: var(--color-red-975);
    --color-criticalBg-5: var(--color-red-990);

    --color-Smoke: var(--color-glass-black-40);

    --color-Hover: var(--color-glass-black-5);
    --color-Press: var(--color-glass-black-10);


    --color-stroke: var(--color-glass-black-2);
    --color-stroke-2: var(--color-glass-black-5);
    --color-stroke-3: var(--color-glass-black-10);
    --color-stroke-4: var(--color-glass-black-20);
    --color-stroke-5: var(--color-glass-black-60);

    --color-primaryBrandStroke: var(--color-primary-500);
    --color-primaryBrandStroke-2: var(--color-primary-700);
    --color-primaryBrandStroke-3: var(--color-primary-900);
    --color-primaryBrandStroke-4: var(--color-primary-950);

    --color-onColorLightStroke: var(--color-glass-white-2);
    --color-onColorLightStroke-2: var(--color-glass-white-5);
    --color-onColorLightStroke-3: var(--color-glass-white-10);
    --color-onColorLightStroke-4: var(--color-glass-white-20);
    --color-onColorLightStroke-5: var(--color-glass-white-60);

    --color-approveStroke: var(--color-green-500);
    --color-approveStroke-2: var(--color-green-700);
    --color-approveStroke-3: var(--color-green-900);

    --color-criticalStroke: var(--color-red-500);
    --color-criticalStroke-2: var(--color-red-800);
    --color-criticalStroke-3: var(--color-red-950);

    --color-warningStroke: var(--color-yellow-500);
    --color-warningStroke-2: var(--color-yellow-800);
    --color-warningStroke-3: var(--color-yellow-900);


    --color-gradShell: var(--color-neutral-white);
    --color-gradShellDark: var(--color-dim-blue-950);

    --color-gradPirmaryBrand: var(--color-primary-500);
    --color-gradPirmaryBrandDark: var(--color-primary-300);

    --color-gradGoldenLight: var(--color-yellow-700);
    --color-gradGolden: var(--color-yellow-500);
    --color-gradGoldenDark: var(--color-amber-400);

}



:root[theme-mode="dark"] {

    --color-text-1: var(--color-neutral-975);
    --color-text-2: var(--color-glass-white-60);
    --color-text-3: var(--color-glass-white-40);
    --color-text-4: var(--color-glass-white-20);

    --color-onNegativeText: var(--color-neutral-200);
    --color-onNegativeText-2: var(--color-glass-black-60);

    --color-primaryBrandText: var(--color-primary-600);
    --color-primaryBrandText-2: var(--color-primary-500);

    --color-onColorLightText: var(--color-neutral-white);
    --color-onColorLightText-2: var(--color-glass-white-80);
    --color-onColorLightText-3: var(--color-glass-white-60);

    --color-onColorDarkText: var(--color-neutral-200);
    --color-onColorDarkText-2: var(--color-glass-black-60);
    --color-onColorDarkText-3: var(--color-glass-black-40);

    --color-approveText: var(--color-green-500);
    --color-approveText-2: var(--color-green-400);

    --color-warningText: var(--color-amber-500);
    --color-warningText: var(--color-amber-400);

    --color-criticalText: var(--color-red-500);
    --color-criticalText-2: var(--color-red-400);


    --color-bg: var(--color-dim-blue-150);
    --color-bg-2: var(--color-dim-blue-200);
    --color-bg-3: var(--color-dim-blue-250);
    --color-bg-4: var(--color-dim-blue-400);

    --color-glassBg: var(--color-glass-black-10);
    --color-glassBg-2: var(--color-glass-black-70);
    --color-glassBg-3: var(--color-glass-black-90);

    --color-negativeGlassBg: var(--color-glass-white-5);
    --color-negativeGlassBg-2: var(--color-glass-white-10);

    --color-onColorGlassBg: var(--color-glass-white-10);

    --color-negativeBg: var(--color-dim-blue-950);
    --color-negativeBg-2: var(--color-dim-blue-850);

    --color-primaryBrandBg: var(--color-primary-500);
    --color-primaryBrandBg-2: var(--color-primary-400);
    --color-primaryBrandBg-3: var(--color-primary-300);
    --color-primaryBrandBg-4: var(--color-primary-100);
    --color-primaryBrandBg-5: var(--color-primary-50);

    --color-primaryBrandGlassBg: var(--color-glass-primary-5);
    --color-primaryBrandGlassBg: var(--color-glass-primary-10);

    --color-approveBg: var(--color-green-500);
    --color-approveBg-2: var(--color-green-300);
    --color-approveBg-3: var(--color-green-100);
    --color-approveBg-4: var(--color-green-50);

    --color-warningBg: var(--color-yellow-400);
    --color-warningBg-2: var(--color-yellow-100);
    --color-warningBg-3: var(--color-yellow-50);

    --color-criticalBg: var(--color-red-500);
    --color-criticalBg-2: var(--color-red-400);
    --color-criticalBg-3: var(--color-red-100);
    --color-criticalBg-4: var(--color-red-50);
    --color-criticalBg-5: var(--color-red-25);

    --color-Smoke: var(--color-glass-black-40);

    --color-Hover: var(--color-glass-black-5);
    --color-Press: var(--color-glass-black-10);


    --color-stroke: var(--color-glass-white-2);
    --color-stroke-2: var(--color-glass-white-5);
    --color-stroke-3: var(--color-glass-white-10);
    --color-stroke-4: var(--color-glass-white-20);
    --color-stroke-5: var(--color-glass-white-60);

    --color-primaryBrandStroke: var(--color-primary-500);
    --color-primaryBrandStroke-2: var(--color-primary-400);
    --color-primaryBrandStroke-3: var(--color-primary-300);
    --color-primaryBrandStroke-4: var(--color-primary-200);

    --color-onColorLightStroke: var(--color-glass-white-2);
    --color-onColorLightStroke-2: var(--color-glass-white-5);
    --color-onColorLightStroke-3: var(--color-glass-white-10);
    --color-onColorLightStroke-4: var(--color-glass-white-20);
    --color-onColorLightStroke-5: var(--color-glass-white-60);

    --color-approveStroke: var(--color-green-500);
    --color-approveStroke-2: var(--color-green-300);
    --color-approveStroke-3: var(--color-green-200);

    --color-criticalStroke: var(--color-red-500);
    --color-criticalStroke-2: var(--color-red-300);
    --color-criticalStroke-3: var(--color-red-100);

    --color-warningStroke: var(--color-yellow-500);
    --color-warningStroke-2: var(--color-yellow-300);
    --color-warningStroke-3: var(--color-yellow-200);


    --color-gradShell: var(--color-dim-blue-150);
    --color-gradShellDark: var(--color-neutral-black);

    --color-gradPirmaryBrand: var(--color-primary-500);
    --color-gradPirmaryBrandDark: var(--color-primary-300);

    --color-gradGoldenLight: var(--color-yellow-700);
    --color-gradGolden: var(--color-yellow-500);
    --color-gradGoldenDark: var(--color-amber-400);

}



.spacingNone {
    padding: 0px 0px;
}

.spacingXXXS {
    padding: 2px 0px;
}

.pacingXXS {
    padding: 4px 0px;
}

.pacingXS {
    padding: 8px 0px;
}

.spacingS {
    padding: 12px 0px;
}

.spacingM {
    padding: 16px 0px;
}

.spacingMNudge {
    padding: 20px 0px;
}

.spacingL {
    padding: 24px 0px;
}

.spacingXL {
    padding: 32px 0px;
}

.spacingXXL {
    padding: 40px 0px;
}

.pacingXXXL {
    padding: 48px 0px;
}