:root {
    /***************************************
     * Colors
     ****************************************/
    --vii-color-bg:#fff; /* content background */
    --vii-color-text:var(--vii-color-gray-70); /* body text */
    --vii-color-heading:var(--vii-color-gray-90);
    --vii-color-permalink:var(--vii-color-text);
    --vii-color-permalink-highlight:var(--vii-color-primary);

    --vii-color-primary-highlight:var(--vii-color-secondary);
    --vii-color-on-primary:#fff;

    --vii-color-secondary-highlight:#e0e0e0;
    --vii-color-on-secondary:#1c1c1c;

    --vii-color-white:#fff;
    --vii-color-gray:#ccc;
    --vii-color-placeholder:#1d1b1b80;

    /* REE#20230913 _1: replace font Roboto with Gilroy */
    --vii-font-secondary:var(--vii-font-primary);


    /***************************************
    * Font sizes and families
    ****************************************/
    /* Relative font sizes (use text to identify) */
    --vii-size-body:var(--vii-size-18);
    --vii-size-h1:var(--vii-size-40);
    --vii-size-h2:var(--vii-size-32);
    --vii-size-h3:var(--vii-size-20);
    --vii-size-h4:var(--vii-size-16);
    --vii-size-h5:var(--vii-size-16);
    --vii-size-h6:var(--vii-size-16);

    /* Absolute font sizes (use exact number to identify) */
    --vii-size-48:48px;
    --vii-size-40:40px;
    --vii-size-32:32px;
    --vii-size-28:28px;
    --vii-size-24:24px;
    --vii-size-20:20px;
    --vii-size-18:18px;
    --vii-size-16:16px;
    --vii-size-14:14px;
    --vii-size-12:12px;

    /* Fonts */
    --vii-font-icomoon:"icomoon", fantasy;


    /***************************************
    * Spacings
    ****************************************/
    /* Relative spacing (vertical) - change based on design */
    --vii-spacing-default:var(--vii-spacing-96);
    --vii-spacing-heading:var(--vii-spacing-24);
    --vii-spacing-paragraph:var(--vii-spacing-heading);


    /***************************************
    * Container & side paddings
    ****************************************/
    /* Gap, width (horizontal) */
    --vii-gap-vc-column:20px; /* vc column */
    --vii-gap-container:40px; /* container paddings */
    --vii-gap-side:calc((var(--vii-100vw) - var(--vii-container)) * 0.5);

    /* Container */
    --vii-container:1245px;


    /***************************************
    * Miscellaneous
    ****************************************/
    /* these variables will be updated by updateCSSVariables() */
    --vii-scroll-bar-width:17px;
    --vii-100vw:calc(100vw - var(--vii-scroll-bar-width));

    /* Transition */
    --vii-transition:all .3s ease;
    --vii-transition-slow:all .6s ease;

    /* Border radius */
    --vii-border-radius:16px;
}


/***************************************
* Global Variables Responsive
****************************************/
@media only screen and (max-width:1024px) {
    :root {
        /* Gutter (horizontal) */
        --vii-gap-container:20px;

        /* Absolute font sizes */
        --vii-size-48:42px;
        --vii-size-40:34px;
        --vii-size-32:30px;
    }
}
@media only screen and (max-width:768px) {
    :root {
        /* Absolute font sizes */
        --vii-size-48:40px;
        --vii-size-40:32px;
        --vii-size-32:28px;
        --vii-size-28:25px;
        --vii-size-24:22px;
    }
}
@media only screen and (max-width:480px) {
    :root {
        /* Absolute font sizes */
        --vii-size-48:36px;
        --vii-size-40:25px;
        --vii-size-32:24px;
        --vii-size-28:22px;
        --vii-size-24:20px;
        --vii-size-20:18px;
        --vii-size-18:17px;

        /* Border radius */
        --vii-border-radius:10px;
    }
}