:root {
    /* dark init */
    /* text */
    --text-text-1: #282D34;
    --text-text-2: #7A8699;
    --text-text-3: #C2C7D0;
    --text-text-4: #FFFFFF;
    /* text end */
    /* Line */
    --line-line-1: #1F2124;
    --line-line-2: #2D3033;
    /* Line end */
    /* Fill */
    --fill-fill-1: #121212;
    --fill-fill-2: #1D1D21;
    --fill-fill-3: #26262B;
    --fill-fill-4: #2D2D33;
    --fill-fill-5: #34343B;
    --fill-fill-6: #031F45;
    /* Fill end */
    /* Functional */
    --functional-blue-1: #01004D;
    --functional-blue-2: #010082;
    --functional-blue-3: #092EAA;
    --functional-blue-4: #0A36C7;
    --functional-blue-5: #0051FF;
    --functional-blue-6: #B5CBF4;
    --functional-blue-7: #E8F1FF;

    --functional-yellow-1: #4D3600;
    --functional-yellow-2: #785904;
    --functional-yellow-3: #FAD51E;
    --functional-yellow-4: #FBDF26;
    --functional-yellow-5: #FCEB56;
    --functional-yellow-6: #FEFCB7;
    --functional-yellow-7: #FFFFE8;

    --functional-red-1: #4D0400;
    --functional-red-2: #6D0C05;
    --functional-red-3: #CE4628;
    --functional-red-4: #D85834;
    --functional-red-5: #E27E5D;
    --functional-red-6: #F5CCB8;
    --functional-red-7: #FFF2EB;

    --functional-green-1: #004D0D;
    --functional-green-2: #066D13;
    --functional-green-3: #60BA21;
    --functional-green-4: #79DB35;
    --functional-green-5: #9AE467;
    --functional-green-6: #C3F5BD;
    --functional-green-7: #F0FFEE;

    --functional-cyan-1: #003D4D;
    --functional-cyan-2: #056679;
    --functional-cyan-3: #00BDD2;
    --functional-cyan-4: #00F0FF;
    --functional-cyan-5: #61FFFF;
    --functional-cyan-6: #BDFFFA;
    --functional-cyan-7: #EBFFFD;

    /* Functional end */
    /* Special */
    --special-mask: rgba(0,0,0,0.8);
    --special-btn-text:#FFFFFF;
    --special-static-white: #FFFFFF;
    --special-static-black: #000000;
    /* Special end */
    /* dark init end */


    /* light init */
    /* text */
    --light-text-text-1: #FFFFFF;
    --light-text-text-2: #C2C7D0;
    --light-text-text-3: #7A8699;
    --light-text-text-4: #282D34;
    /* text end */
    /* Line */
    --light-line-line-1: #F4F5F6;
    --light-line-line-2: #E8E9EA;
    /* Line end */
    /* Fill */
    --light-fill-fill-1: #FFFFFF;
    --light-fill-fill-2: #F9F9F9;
    --light-fill-fill-3: #F4F5F6;
    --light-fill-fill-4: #E5E7EB;
    --light-fill-fill-5: #D7D9DE;
    --light-fill-fill-6: #031F45;
    /* Fill end */
    /* Functional */
    --light-functional-blue-1: #E8F1FF;
    --light-functional-blue-2: #B4CBF4;
    --light-functional-blue-3: #2F5AD2;
    --light-functional-blue-4: #0A36C7;
    --light-functional-blue-5: #0627A8;
    --light-functional-blue-6: #010082;
    --light-functional-blue-7: #01004D;

    --light-functional-yellow-1: #FFFFE8;
    --light-functional-yellow-2: #FEFCB9;
    --light-functional-yellow-3: #FBE02E;
    --light-functional-yellow-4: #FAD000;
    --light-functional-yellow-5: #CFA500;
    --light-functional-yellow-6: #785800;
    --light-functional-yellow-7: #4D3600;

    --light-functional-red-1: #FFF0E8;
    --light-functional-red-2: #F5CBB7;
    --light-functional-red-3: #D85A37;
    --light-functional-red-4: #CE3513;
    --light-functional-red-5: #AE240C;
    --light-functional-red-6: #6D0B03;
    --light-functional-red-7: #4D0400;

    --light-functional-green-1: #EBFFE8;
    --light-functional-green-2: #BDF5B7;
    --light-functional-green-3: #95E25F;
    --light-functional-green-4: #79DB35;
    --light-functional-green-5: #60BA21;
    --light-functional-green-6: #036D11;
    --light-functional-green-7: #004D0D;

    --light-functional-cyan-1: #E8FFFD;
    --light-functional-cyan-2: #BAFFFA;
    --light-functional-cyan-3: #2EF8FF;
    --light-functional-cyan-4: #00F0FF;
    --light-functional-cyan-5: #00BDD2;
    --light-functional-cyan-6: #006579;
    --light-functional-cyan-7: #003D4D;

    /* Functional end */
    /* Special */
    --light-special-mask: rgba(0, 0, 0, 0.6);
    --light-special-btn-text:#0A36C7;
    --light-special-static-white: #FFFFFF;
    --light-special-static-black: #000000;
    /* Special end */
    /* light init end */


    /* Font Size */
    --font-size-displayLarge:64px;
    --Display-Large-S: 1.125;

    --font-size-displayMedium:48px;
    --Display-Medium-S: 1.17;

    --font-size-headlineLarge:36px;
    --Headline-Large-S: 1.22;

    --font-size-headlineMedium:28px;
    --Headline-Medium-S: 1.28;

    --font-size-headlineSmall:24px;
    --Headline-Small-S: 1.33;
    
    --font-size-titleLarge:20px;
    --Title-Large-S: 1.4;

    --font-size-titleMedium:16px;
    --Title-Medium-S: 1.5;

    --font-size-titleSmall:14px;
    --Title-Small-S: 1.43;

    --font-size-bodyLarge:16px;
    --Body-Large-R: 1.5;

    --font-size-bodyMedium:14px;
    --Body-Medium-R: 1.43;

    --font-size-bodySmall:12px;
    --Body-Small-R: 1.33;

    --font-size-bodyMini:10px;
    --Body-Mini-R: 1.4;

    --font-size-linkLarge:16px;
    --Link-Large-R: 1.5;

    --font-size-linkMedium:14px;
    --Link-Medium-R: 1.43;

    --font-size-linkSmall:12px;
    --Link-Small-R: 1.33;
    
    /* Font Size end */

}

body[theme-mode="dark"]{
    /* Text */
    --text-text-primary: var(--text-text-4);
    --text-text-secondary: var(--text-text-3);
    --text-text-tertiary: var(--text-text-2);
    --text-text-special: var(--text-text-1);
    --text-text-blue-cyan: var(--functional-cyan-4);
    --text-text-cyan-blue: var(--functional-blue-4);
    --text-text-white-static: var(--special-static-white);
    --text-text-black-static: var(--special-static-black);
    /* Text end */

    /* Fill */
    --fill-page-primary: var(--fill-fill-1);
    --fill-page-secondary: var(--fill-fill-2);
    --fill-page-tertiary: var(--fill-fill-3);
    --fill-card: var(--fill-fill-3);
    --fill-page-gray: var(--fill-fill-2);
    --fill-brand-bg: var(--fill-fill-6);
    --fill-input-default: var(--fill-fill-3);
    /* Fill end */

    /* Line */
    --line-divider-primary: var(--line-line-1);
    --line-border: var(--line-line-2);
    /* Line end */

    /* Functional */
    --functional-tints-blue: var(--functional-blue-4);
    --functional-tag-border-blue: var(--functional-blue-3);
    --functional-tints-primary-bg: var(--functional-blue-1);
    --functional-tints-alert: var(--functional-yellow-4);
    --functional-tag-border-yellow: var(--functional-yellow-3);
    --functional-tints-alert-bg: var(--functional-yellow-1);
    --functional-tints-error: var(--functional-red-4);
    --functional-tag-border-red: var(--functional-red-3);
    --functional-tints-error-bg: var(--functional-red-1);
    --functional-tints-success: var(--functional-green-4);
    --functional-tag-border-green: var(--functional-green-3);
    --functional-tints-success-bg: var(--functional-green-1);
    --functional-tints-cyan: var(--functional-cyan-4);
    --functional-tints-cyan-bg: var(--functional-cyan-1);
    /* Functional end */



    /* White tones mixed in dark tones */
    /* text */
    --light-text-text-primary: var(--light-text-text-4);
    --light-text-text-secondary: var(--light-text-text-3);
    --light-text-text-white-static: var(--light-special-static-white);
    --light-text-text-blue-cyan: var(--light-functional-blue-4);
    /* text end */

    /* Fill */
    --light-fill-page-gray: var(--light-fill-fill-2);
    --light-fill-card: var(--light-fill-fill-1);
    /* Fill end */

    /* Line */
    --light-line-border: var(--light-line-line-2);
    /* Line end */

    /* Functional */
    --light-functional-tints-blue: var(--light-functional-blue-4);
    --light-functional-tag-border-blue: var(--light-functional-blue-3);
    /* Functional end */

    /* Special */
    /* Special end */

}

:root body[theme-mode="light"] {
    /* Text */
    --text-text-primary: var(--light-text-text-4);
    --text-text-secondary: var(--light-text-text-3);
    --text-text-tertiary: var(--light-text-text-2);
    --text-text-special: var(--light-text-text-1);
    --text-text-blue-cyan: var(--light-functional-blue-4);
    --text-text-cyan-blue: var(--light-functional-cyan-4);
    --text-text-white-static: var(--light-special-static-white);
    --text-text-black-static: var(--light-special-static-black);
    /* Text end */

    /* Fill */
    --fill-page-primary: var(--light-fill-fill-1);
    --fill-page-secondary: var(--light-fill-fill-2);
    --fill-page-tertiary: var(--light-fill-fill-3);
    --fill-card: var(--light-fill-fill-1);
    --fill-page-gray: var(--light-fill-fill-2);
    --fill-brand-bg: var(--light-fill-fill-6);
    --fill-input-default: var(--light-fill-fill-3);
    /* Fill end */

    /* Line */
    --line-divider-primary: var(--light-line-line-1);
    --line-border: var(--light-line-line-2);
    /* Line end */

    /* Functional */
    --functional-tints-blue: var(--light-functional-blue-4);
    --functional-tag-border-blue: var(--light-functional-blue-3);
    --functional-tints-primary-bg: var(--light-functional-blue-1);
    --functional-tints-alert: var(--light-functional-yellow-4);
    --functional-tag-border-yellow: var(--light-functional-yellow-3);
    --functional-tints-alert-bg: var(--light-functional-yellow-1);
    --functional-tints-error: var(--light-functional-red-4);
    --functional-tag-border-red: var(--light-functional-red-3);
    --functional-tints-error-bg: var(--light-functional-red-1);
    --functional-tints-success: var(--light-functional-green-4);
    --functional-tag-border-green: var(--light-functional-green-3);
    --functional-tints-success-bg: var(--light-functional-green-1);
    --functional-tints-cyan: var(--light-functional-cyan-4);
    --functional-tints-cyan-bg: var(--light-functional-cyan-1);
    /* Functional end */
}