/*!
 * Theme Name: Lagom WHMCS Client Theme
 * Author: RS Studio (https://rsstudio.net)
 * Theme URL: https://lagom.rsstudio.net/
 * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/
 *
 * This file is part of a licensed product. Unauthorized redistribution, modification,
 * or use outside of the licensed environment is strictly prohibited.
 *
 * © RS Studio. All rights reserved.
 */

:root {

    /* General */
    
    --svg-icon-stroke-width:    2px;
    --svg-illustration-shadow-color: #000;
    --svg-illustration-shadow-opacity-start: 0.15;

    --svg-icon-color-base:                          var(--brand-primary);
    --svg-icon-color-lighter:                       var(--brand-primary-lighter);
    --svg-icon-color-secondary:                     var(--gray-darker);
    --svg-icon-color-icon:                          #ffffff;
    
    --svg-icon-on-dark-color-secondary:             #ffffff;
    --svg-icon-on-primary-color-base:               #ffffff;
    --svg-icon-on-primary-color-lighter:            #DEE0E3;
    --svg-icon-on-primary-color-secondary:          #ffffff;
    --svg-icon-on-primary-color-icon:               var(--brand-primary);

    /* Shared Elements */

    --svg-screen-top-bg: var(--svg-illustration-primary-1);
    --svg-screen-top-front: var(--svg-illustration-gray-2);
    --svg-screen-top-back: var(--svg-illustration-gray-1);
    --svg-screen-top-logo: var(--svg-illustration-gray-w);
    --svg-screen-top-logo-el: var(--svg-illustration-primary-1);
    --svg-screen-bottom-button: var(--svg-illustration-gray-3);
    --svg-screen-bottom-front: var(--svg-illustration-gray-7);
    --svg-screen-bottom-back: var(--svg-illustration-gray-3);
    --svg-screen-leg-front: var(--svg-illustration-gray-7);
    --svg-screen-leg-back: var(--svg-illustration-gray-3);    

    --svg-smartphone-border: var(--svg-illustration-gray-3);
    --svg-smartphone-front: var(--svg-illustration-gray-6);
    --svg-smartphone-screen: var(--svg-illustration-gray-1);
    --svg-smartphone-icon: var(--svg-illustration-gray-1);
    --svg-smartphone-icon-bg: var(--svg-illustration-gray-w);  

    --svg-tablet-back: var(--svg-illustration-gray-3);
    --svg-tablet-front: var(--svg-illustration-gray-8);
    --svg-tablet-screen: var(--svg-illustration-gray-w);

    /* Browser */
    
    --svg-browser-body: var(--svg-illustration-gray-8);
    --svg-browser-top: var(--svg-illustration-gray-3);
    --svg-browser-top-1: var(--svg-illustration-gray-w);
    --svg-browser-text: var(--svg-illustration-gray-3);
    --svg-browser-banner: var(--svg-illustration-gray-w);

    /* Laptop */ 

    --svg-laptop-bottom-back: var(--svg-illustration-gray-3);
    --svg-laptop-bottom-top: var(--svg-illustration-gray-7);
    --svg-laptop-touchpad-inside: var(--svg-illustration-gray-3);
    --svg-laptop-touchpad-outside: rgba(0,0,0,0.4);
    --svg-laptop-screen: var(--svg-illustration-primary-1);
    --svg-laptop-screen-logo: var(--svg-illustration-gray-w);
    --svg-laptop-screen-back: var(--svg-illustration-gray-1);
    --svg-laptop-screen-front: var(--svg-illustration-gray-2);

    --svg-keyboard-keys-bottom: var(--svg-illustration-gray-3);
    --svg-keyboard-keys-top: var(--svg-illustration-gray-w);  
    --svg-keyboard-body-top: var(--svg-illustration-gray-3);
    --svg-keyboard-body-bottom: var(--svg-illustration-gray-7);

    /* Weebly */

    --svg-weebly-cup-body: var(--svg-illustration-gray-3);
    --svg-weebly-cup-top: var(--svg-illustration-gray-8);
    --svg-weebly-cup-inside: var(--svg-illustration-gray-3);

    --svg-weebly-left-elements: var(--svg-illustration-gray-3);
    --svg-weebly-left-elements-bottom: var(--svg-illustration-gray-8);
    --svg-weebly-left-body: var(--svg-illustration-gray-8);

    --svg-weebly-colors-bottom: var(--svg-illustration-yellow-1);
    --svg-weebly-colors-top: var(--svg-illustration-yellow-2);
    --svg-weebly-colors-top-1: var(--svg-illustration-gray-w);
    --svg-weebly-colors-top-2: var(--svg-illustration-yellow-3);
    --svg-weebly-colors-top-3: var(--svg-illustration-yellow-4);

    /* SVG Graphics */

    --svg-graphic-shadow:                   var(--box-shadow-lg);

    --svg-graphic-bg-primary:               var(--brand-primary);
    --svg-graphic-bg-secondary:             var(--svg-illustration-gray-2);
    --svg-graphic-bg-body:                  #fff;
    --svg-graphic-bg-browser-top:           var(--svg-illustration-gray-8);
    --svg-graphic-bg-browser-actions:       var(--svg-illustration-gray-3);
    --svg-graphic-bg-browser-search:        #fff;
    --svg-graphic-bg-banner:                var(--svg-illustration-gray-8);
    --svg-graphic-bg-faded:                 var(--svg-illustration-gray-8);
    --svg-graphic-bg-faded-2:               var(--svg-illustration-gray-6);
    --svg-graphic-bg-faded-3:               var(--svg-illustration-gray-3);
    --svg-graphic-bg-white:                 #fff;
    --svg-graphic-bg-green:                 var(--brand-success);
    --svg-graphic-bg-red:                   var(--brand-danger);
    --svg-graphic-bg-red-darker:            var(--brand-danger-darker);
    
    --svg-graphic-stroke-primary:           var(--brand-primary);
    --svg-graphic-stroke-white:             #fff;
    --svg-graphic-stroke-faded:             var(--svg-illustration-gray-3);
    --svg-graphic-stroke-faded-2:           var(--svg-illustration-gray-3);

    /* SVG Icons */

    --svg-icon-color-1:                             var(--brand-primary-lighter);
    --svg-icon-color-2:                             var(--brand-primary);
    --svg-icon-color-3:                             var(--gray-darker);
    --svg-icon-color-4:                             #ffffff;      
    --svg-icon-color-5:                             var(--gray-lighter-3);
    
    --svg-icon-on-dark-color-1:                     var(--svg-icon-color-4);
    --svg-icon-on-dark-color-2:                     var(--svg-icon-color-5);
    --svg-icon-on-dark-color-3:                     var(--svg-icon-color-4);
    --svg-icon-on-dark-color-4:                     var(--svg-icon-color-2);
}


.lagom-dark-mode{

    /* Section : Dark Mode Colors */
    
    --svg-icon-color-3:                             #ffffff;

    --svg-icon-on-dark-color-2:                     var(--gray-darker);

}

.panel-summary-primary,
.panel-summary-secondary{
    --svg-icon-color-1:                             #ffffff;
    --svg-icon-color-2:                             #DEE0E3;
    --svg-icon-color-3:                             #ffffff; 
    --svg-icon-color-4:                             var(--brand-primary);      
    --svg-icon-color-5:                             #ffffff;
}