@charset "utf-8";
:root{
    --view-height: calc((var(--vh, 1vh) * 100));

    --logo-width: 285px;
    --logo-height: 56px;
    
    --primary-lighten5: #E6F1FF;
    --primary-lighten4: #D7E9FF;
    --primary-lighten3: #A4C4DB;
    --primary-lighten2: #77A2C7;
    --primary-lighten1: #2F5F9E; 
    --primary-base: #002773;
    --primary-darken1: #002169;
    --primary-darken2: #001957;
    --primary-darken3: #001245;
    --primary-darken4: #000C33;
    
    --secondary-lighten5: #F5FAFC;
    --secondary-lighten4: #EEF2F7;
    --secondary-lighten3: #C9E0F0;
    --secondary-lighten2: #ACCCE8;
    --secondary-lighten1: #76A0D6; 
    --secondary-base: #4570C4;
    --secondary-darken1: #385EB0;
    --secondary-darken2: #264594;
    --secondary-darken3: #193175;
    --secondary-darken4: #0E2059;

    --red-base: #EE0701;
    
    --green-base: #02723B;
    --green-lighten1: #0a9b55;

    --danger-base: #E6002D;
    --warning-base: #EFE73B;
    --success-base: #008A1E;
    --info-base: #1D76DB;

    --grey-lighten5: #F9F9F9;
    --grey-lighten4: #D8D8D8;
    --grey-lighten3: #C6C6C6;
    --grey-lighten2: #AAA;
    --grey-lighten1: #666;
    --grey-base: #555; 
    --grey-darken1: #444;
    --grey-darken2: #33363D;
    --grey-darken3: #222;
    --grey-darken4: #191919;

    --border-color: var(--grey-lighten4);

    --container: 1680px;
    --container-lg: 1840px;

    --container-gutter: 16px;;

    --timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
    --transition: .35s var(--timing-function);

    /* Header */
    
    --header-head: 0;
    --header-body: 80px;
    --header-height: var(--header-body);

    /* Typography */
    --tit-font-size-xs: 19px;
    --tit-font-size-sm: 24px;
    --tit-font-size: 32px;
    --tit-font-size-lg: 40px;
    --tit-font-size-xl: 56px;

    --txt-font-size-xs: 13px;
    --txt-font-size-sm: 15px;
    --txt-font-size: 17px; 
    --txt-font-size-lg: 20px;

    /* Input */
    --input-height: var(--btn-height);
    --input-border-color: var(--border-color);
    --input-bg-color: #fff;
    --input-border-radius: 4px;
    --input-padding: 10px;
    --input-font-size: var(--txt-font-size);
    
    --input-height-lg: 42px;

    --control-icon-size: 20px; 
    --control-label-font-size: var(--txt-font-size); 
    --control-label-color: var(--grey-darken4); 
    --control-gap: 8px;

    /* Grid gutter */
    --gutter-xxs: 4px;
    --gutter-xs: 5px;
    --gutter-sm: 8px;
    --gutter: 10px;
    --gutter-lg: 16px;
    
    /* Rounded */
    --rounded-xs: 8px;
    --rounded-sm: 12px;
    --rounded: 16px;

    /* Button */
    --btn-height-sm: 32px;
    --btn-height: 36px;
    --btn-height-lg: 40px;
    --btn-height-xl: 48px;
    --btn-height-xxl: 56px;
    
    --btn-padding-sm: 0 16px;
    --btn-padding: 0 16px;
    --btn-padding-lg: 0 16px;
    --btn-padding-xl: 0 16px;
    --btn-padding-xxl: 0 16px;
    
    --btn-font-size-sm: var(--txt-font-size-sm);
    --btn-font-size: var(--txt-font-size-sm);
    --btn-font-size-lg: var(--txt-font-size-sm);
    --btn-font-size-xl: var(--txt-font-size);
    --btn-font-size-xxl: var(--tit-font-size-sm);
}