/*!
 * Theme Name: Lagom WHMCS Client Theme
 * Theme URL: https://lagom.rsstudio.net/
 *
 * Terms of Service: https://lagom.rsstudio.net/docs/legal/terms-of-service.html
 * 
 * Copyright (c) 2021 RS Studio
 */

 :root { /* Name: Typography; Index: 1 */

    /* Section: Font Family */
    
    --font-family-base:                             Roboto; /* name: Use Google Font Face; type: font; */
    --font-family-custom:                           unset; /*name: Use Custom Font Face; type: custom-font; overwrite: --font-family-base;*/
    --font-family-monospace:                        SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    
    --font-family-icons-medium:                     'lagom-medium-icons';
    --font-family-icons-small:                      'lagom-small-icons';

    /* Section: Font Color */

    --text-body-color:                              var(--gray-base); /* name: Base; group: Font Color; type: select-colors; */
    --text-lighter-color:                           var(--gray-lighter); /* name: Lighter; group: Font Color; type: select-colors; */
    --text-faded-color:                             var(--gray-lighter-2); /* name: Faded; group: Font Color; type: select-colors; */
    --text-heading-color:                           var(--gray-darker); /* name: Heading; group: Font Color; type: select-colors; */
    --text-primary-color:                           var(--brand-primary); /* name: Primary; group: Font Color; type: select-colors; */
    --text-success-color:                           var(--brand-success); /* name: Success; group: Font Color; type: select-colors; */
    --text-warning-color:                           var(--brand-warning); /* name: Warning; group: Font Color; type: select-colors; */
    --text-danger-color:                            var(--brand-danger); /* name: Danger; group: Font Color; type: select-colors; */
    
    /* Section: Secondary Font Color - on secondary and primary color */

    --text-secondary-body-color:                    hsla(0, 0%, 100%, 92%); /* name: Secondary - Base; group: Font Color; type: select-colors; */
    --text-secondary-lighter-color:                 hsla(0, 0%, 100%, 80%); /* name: Secondary - Lighter; group: Font Color; type: select-colors; */
    --text-secondary-faded-color:                   hsla(0, 0%, 100%, 56%); /* name: Secondary - Faded; group: Font Color; type: select-colors; */
    --text-secondary-heading-color:                 #fff; /* name: Secondary - Heading; group: Font Color; type: select-colors; */
    --text-secondary-primary-color:                 var(--brand-primary-lighter); /* name: Secondary - Primary; group: Font Color; type: select-colors; */
    --text-secondary-success-color:                 var(--brand-success-lighter); /* name: Secondary - Success; group: Font Color; type: select-colors; */
    --text-secondary-warning-color:                 var(--brand-warning-lighter); /* name: Secondary - Warning; group: Font Color; type: select-colors; */
    --text-secondary-danger-color:                  var(--brand-danger-lighter); /* name: Secondary - Danger; group: Font Color; type: select-colors; */
    
    /* Section: Link Colors */

    --link-color:                                   var(--brand-primary); /* name: Link; group: Font Color; type: select-colors; */
    --link-hover-color:                             var(--brand-primary); /* name: Link Hover; group: Font Color; type: select-colors; */
    --ui-nav-link-color:                            var(--gray-darker); /* name: Nav Link; group: Font Color; type: select-colors; */
    --ui-nav-link-hover-color:                      var(--brand-primary); /* name: Nav Link - Hover; group: Font Color; type: select-colors; */
    --ui-nav-link-active-color:                     var(--brand-primary); /* name: Nav Link - Active; group: Font Color; type: select-colors; */
    --ui-nav-link-icon-color:                       var(--gray-icons); /* name: Nav Link Icon; group: Font Color; type: select-colors; */
    --ui-nav-link-icon-hover-color:                 var(--gray-icons-hover); /* name: Nav Link Icon - Hover; group: Font Color; type: select-colors; */
    --ui-nav-link-icon-active-color:                var(--gray-icons-hover); /* name: Nav Link Icon - Active; group: Font Color; type: select-colors; */

    --ui-nav-secondary-link-color:                  var(--gray-base); /* name: Sub Nav Link; group: Font Color; type: select-colors; */
    --ui-nav-secondary-link-hover-color:            var(--brand-primary);  /* name: Sub Nav Link - Hover; group: Font Color; type: select-colors; */
    --ui-nav-secondary-link-active-color:           var(--brand-primary);  /* name: Sub Nav Link - Active; group: Font Color; type: select-colors; */
    --ui-nav-secondary-link-icon-color:             var(--gray-icons);  /* name: Sub Nav Link Icon; group: Font Color; type: select-colors; */
    --ui-nav-secondary-link-icon-hover-color:       var(--gray-icons-hover);  /* name: Sub Nav Link Icon - Hover; group: Font Color; type: select-colors; */
    --ui-nav-secondary-link-icon-active-color:      var(--gray-icons-hover);  /* name: Sub Nav Link Icon - Active; group: Font Color; type: select-colors; */
    
    /* Section: Font Size */
    
    --font-size-xs:                                 12px; /* name: Extra Small; group: Font Size; type: size; append: px;*/
    --font-size-sm:                                 13px; /* name: Small; group: Font Size; type: size; append: px;*/
    --font-size-base:                               14px; /* name: Base; group: Font Size; type: size; append: px;*/
    --font-size-md:                                 15px; /* name: Medium; group: Font Size; type: size; append: px;*/
    --font-size-lg:                                 17px; /* name: Large; group: Font Size; type: size; append: px;*/
    --font-size-xlg:                                20px; /* name: Extra Large; group: Font Size; type: size; append: px;*/
    --font-size-xxlg:                               24px; /* name: Super Large; group: Font Size; type: size; append: px;*/                  
    --font-size-h6:                                 18px; /* name: Heading "h6"; group_name: H6; group: Font Size; type: size; append: px;*/
    --font-size-h5:                                 20px; /* name: Heading "h5"; group_name: H5; group: Font Size; type: size; append: px;*/
    --font-size-h4:                                 26px; /* name: Heading "h4"; group_name: H4; group: Font Size; type: size; append: px;*/
    --font-size-h3:                                 36px; /* name: Heading "h3"; group_name: H3; group: Font Size; type: size; append: px;*/
    --font-size-h2:                                 40px; /* name: Heading "h2"; group_name: H2; group: Font Size; type: size; append: px;*/
    --font-size-h1:                                 48px; /* name: Heading "h1"; group_name: H1; group: Font Size; type: size; append: px;*/
    
    /* Section: Font Line Height */
    
    --line-height-xs:                               18px; /* name: Extra Small; group: Line Height; type: size; append: px;*/
    --line-height-sm:                               20px; /* name: Small; group: Line Height; type: size; append: px;*/
    --line-height-base:                             24px; /* name: Base; group: Line Height; type: size; append: px;*/
    --line-height-md:                               24px; /* name: Medium; group: Line Height; type: size; append: px;*/
    --line-height-lg:                               28px; /* name: Large; group: Line Height; type: size; append: px;*/
    --line-height-xlg:                              32px; /* name: Extra Large; group: Line Height; type: size; append: px;*/
    --line-height-xxlg:                             40px; /* name: Super Large; group: Line Height; type: size; append: px;*/
    --line-height-h6:                               24px; /* name: Heading "h6"; group_name: H6; group: Line Height; type: size; append: px;*/
    --line-height-h5:                               28px; /* name: Heading "h5"; group_name: H5; group: Line Height; type: size; append: px;*/
    --line-height-h4:                               34px; /* name: Heading "h4"; group_name: H4; group: Line Height; type: size; append: px;*/
    --line-height-h3:                               46px; /* name: Heading "h3"; group_name: H3; group: Line Height; type: size; append: px;*/
    --line-height-h2:                               52px; /* name: Heading "h2"; group_name: H2; group: Line Height; type: size; append: px;*/
    --line-height-h1:                               56px; /* name: Heading "h1"; group_name: H1; group: Line Height; type: size; append: px;*/
    
    /* Section: Font Weight */
    
    --font-weight-light:                            300; /* name: Light; group: Font Weight;*/
    --font-weight-base:                             400; /* name: Base; group: Font Weight;*/
    --font-weight-medium:                           500; /* name: Medium; group: Font Weight;*/
    --font-weight-bold:                             700; /* name: Bold; group: Font Weight;*/
    --font-weight-black:                            900; /* name: Black; group: Font Weight;*/
    --font-weight-bolder:                           bolder;
    --font-weight-h6:                               var(--font-weight-medium); /* name: Heading "h6";  var_group: Font Weight; group: Font Weight;*/
    --font-weight-h5:                               var(--font-weight-base); /* name: Heading "h5";  var_group: Font Weight; group: Font Weight;*/
    --font-weight-h4:                               var(--font-weight-light); /* name: Heading "h4";  var_group: Font Weight; group: Font Weight;*/
    --font-weight-h3:                               var(--font-weight-bold); /* name: Heading "h3";  var_group: Font Weight; group: Font Weight;*/
    --font-weight-h2:                               var(--font-weight-black); /* name: Heading "h2";  var_group: Font Weight; group: Font Weight;*/
    --font-weight-h1:                               var(--font-weight-black); /* name: Heading "h1";  var_group: Font Weight; group: Font Weight;*/

    --paragraph-margin-bottom:                      var(--spacing-2x);
    --headings-margin-bottom:                       var(--spacing-2x);
    --link-decoration:                              none;

    --article-font-color:                           var(--text-body-color);
    --article-font-size-base:                       var(--font-size-lg);
    --article-font-weight-base:                     var(--font-weight-base);
    --article-line-height-base:                     var(--line-height-lg);
    --article-h1-margin-top:                        var(--spacing-8x);
    --article-h1-margin-bottom:                     var(--spacing-6x);
    --article-h2-margin-top:                        var(--spacing-6x);
    --article-h2-margin-bottom:                     var(--spacing-4x);
    --article-h3-margin-top:                        var(--spacing-5x);
    --article-h3-margin-bottom:                     var(--spacing-4x);
    --article-h4-margin-top:                        var(--spacing-5x);
    --article-h4-margin-bottom:                     var(--spacing-4x);
    --article-h5-margin-top:                        var(--spacing-4x);
    --article-h5-margin-bottom:                     var(--spacing-2x);
    --article-h6-margin-top:                        var(--spacing-3x);
    --article-h6-margin-bottom:                     var(--spacing-2x);
}


@media (max-width: 767px) {
    :root {

        --font-size-xs:                             12px; 
        --font-size-sm:                             13px; 
        --font-size-base:                           14px; 
        --font-size-md:                             15px; 
        --font-size-lg:                             16px; 
        --font-size-xlg:                            18px; 
        --font-size-xxlg:                           21px; 
        --font-size-h6:                             16px; 
        --font-size-h5:                             18px; 
        --font-size-h4:                             21px; 
        --font-size-h3:                             26px; 
        --font-size-h2:                             32px; 
        --font-size-h1:                             40px;

        --line-height-xs:                           18px; 
        --line-height-sm:                           20px; 
        --line-height-base:                         24px; 
        --line-height-md:                           24px; 
        --line-height-lg:                           28px; 
        --line-height-xlg:                          32px; 
        --line-height-xxlg:                         40px; 
        --line-height-h6:                           22px; 
        --line-height-h5:                           28px;
        --line-height-h4:                           30px;
        --line-height-h3:                           34px;
        --line-height-h2:                           40px;
        --line-height-h1:                           48px;
    }
}
