/*!
Wallex Token Style
Version: 1.0.0
*/

/*--------------------------------------------------------------
>>> 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-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-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);

}