:root {

    --gears-ref-typeface-plain : Roboto;
    --gears-ref-typeface-brand : Roboto;
    --gears-ref-typeface-weight-medium : 500;
    --gears-ref-typeface-weight-regular : 400;
    /* https://www.colorhexa.com/1a73e8
        white
        26
        25
        24
        22
        20
        18
        16
        14
        9
        6
        4
        1
    */
    --gears-ref-palette-primary-100 : #fcfdff;
    --gears-ref-palette-primary-99 : #f0f6fd; 
    --gears-ref-palette-primary-95 : #deebfc;
    --gears-ref-palette-primary-90 : #cce0fa;
    --gears-ref-palette-primary-80 : #a9caf6;
    --gears-ref-palette-primary-70 : #85b4f3;
    --gears-ref-palette-primary-60 : #619fef;
    --gears-ref-palette-primary-50 : #3e89ec;
    --gears-ref-palette-primary-40 : #09324f;
    --gears-ref-palette-primary-30 : #07273e;
    --gears-ref-palette-primary-20 : #051c2c;
    --gears-ref-palette-primary-10 : #03111a;
    --gears-ref-palette-primary-0 : #010609;

    /* https://www.colorhexa.com/ad5555 */
    --gears-ref-palette-secondary-100 : #ffffff;
    --gears-ref-palette-secondary-99 : #f9fcfb;
    --gears-ref-palette-secondary-95 : #ebf7f1;
    --gears-ref-palette-secondary-90 : #ddf1e8;
    --gears-ref-palette-secondary-80 : #c1e6d5;
    --gears-ref-palette-secondary-70 : #a5dac2;
    --gears-ref-palette-secondary-60 : #8acfaf;
    --gears-ref-palette-secondary-50 : #6ec39c;
    --gears-ref-palette-secondary-40 : #52b889;
    --gears-ref-palette-secondary-30 : #317757;
    --gears-ref-palette-secondary-20 : #204d38;
    --gears-ref-palette-secondary-10 : #143224;
    --gears-ref-palette-secondary-0 : #030806;
    
    /* https://www.colorhexa.com/e81a73 */
    --gears-ref-palette-tertiary-100 : #fdfefe;
    --gears-ref-palette-tertiary-99 : #fdfefe;
    --gears-ref-palette-tertiary-95 : #eff7f8;
    --gears-ref-palette-tertiary-90 : #e1f1f2;
    --gears-ref-palette-tertiary-80 : #c6e4e7;
    --gears-ref-palette-tertiary-70 : #aad6db;
    --gears-ref-palette-tertiary-60 : #8fc9cf;
    --gears-ref-palette-tertiary-50 : #73bcc4;
    --gears-ref-palette-tertiary-40 : #4ba7b1;
    --gears-ref-palette-tertiary-30 : #34737a;
    --gears-ref-palette-tertiary-20 : #224c51;
    --gears-ref-palette-tertiary-10 : #163235;
    --gears-ref-palette-tertiary-0 : #050b0c;
    
    /* https://www.colorhexa.com/16d984 */
    --gears-ref-palette-success-100 : #f8fffc;
    --gears-ref-palette-success-99 : #f0fef8;
    --gears-ref-palette-success-95 : #dffcef;
    --gears-ref-palette-success-90 : #cdfae6;
    --gears-ref-palette-success-80 : #a9f6d5;
    --gears-ref-palette-success-70 : #86f3c3;
    --gears-ref-palette-success-60 : #62efb2;
    --gears-ref-palette-success-50 : #3eeba0;
    --gears-ref-palette-success-40 : #16d984;
    --gears-ref-palette-success-30 : #12b56e;
    --gears-ref-palette-success-20 : #095c38;
    --gears-ref-palette-success-10 : #063922;
    --gears-ref-palette-success-0 : #000302;

    
    /* https://www.colorhexa.com/e8281a */
    --gears-ref-palette-error-100 : #fdf8f8;
    --gears-ref-palette-error-99 : #fef1f0;
    --gears-ref-palette-error-95 : #fce0de;
    --gears-ref-palette-error-90 : #fad0cd;
    --gears-ref-palette-error-80 : #f6aea9;
    --gears-ref-palette-error-70 : #f38d85;
    --gears-ref-palette-error-60 : #ef6b62;
    --gears-ref-palette-error-50 : #ec4a3e;
    --gears-ref-palette-error-40 : #e8281a;
    --gears-ref-palette-error-30 : #b51d12;
    --gears-ref-palette-error-20 : #5c0f09;
    --gears-ref-palette-error-10 : #390906;
    --gears-ref-palette-error-0 : #030000;
    
    /* https://www.colorhexa.com/e88f1a */
    --gears-ref-palette-warning-100 : #fffdfb;
    --gears-ref-palette-warning-99 : #fdf8f0;
    --gears-ref-palette-warning-95 : #fcefde;
    --gears-ref-palette-warning-90 : #fae6cc;
    --gears-ref-palette-warning-80 : #f6d5a9;
    --gears-ref-palette-warning-70 : #f3c385;
    --gears-ref-palette-warning-60 : #efb261;
    --gears-ref-palette-warning-50 : #eca03e;
    --gears-ref-palette-warning-40 : #e88f1a;
    --gears-ref-palette-warning-30 : #b56f12;
    --gears-ref-palette-warning-20 : #5c3809;
    --gears-ref-palette-warning-10 : #382206;
    --gears-ref-palette-warning-0 : #030200;

    
    --gears-sys-state-focus-indicator : 2px solid var(--gears-sys-color-outline);

    --gears-sys-shape-corner-full : 48px;
    --gears-sys-shape-corner-extra-large : 28px;
    --gears-sys-shape-corner-large : 16px;
    --gears-sys-shape-corner-large-start : 16px 0px 0px 16px;
    --gears-sys-shape-corner-medium : 12px;
    --gears-sys-shape-corner-medium-start : 12px 0px 0px 12px;
    --gears-sys-shape-corner-small : 8px;
    --gears-sys-shape-corner-extra-small : 4px;
    --gears-sys-shape-corner-extra-small-top : 4px 4px 0px 0px;
    --gears-sys-shape-corner-none : none;

    --gears-sys-elevation-level0 : none;
    --gears-sys-elevation-level1 : 0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 1px 3px 1px rgb(0 0 0 / 15%);
    --gears-sys-elevation-level2 : 0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 2px 6px 2px rgb(0 0 0 / 15%);
    --gears-sys-elevation-level3 : 0px 1px 3px 0px rgb(0 0 0 / 30%), 0px 4px 8px 3px rgb(0 0 0 / 15%);
    --gears-sys-elevation-level4 : 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 9px 0 rgba(0, 0, 0, 0.19);
    --gears-sys-elevation-level5 : 0 12px 12px 0 rgba(0, 0, 0, 0.2), 0 13px 13px 0 rgba(0, 0, 0, 0.19);

    
    --gears-sys-typescale-display-large-font : var(--gears-ref-typeface-brand);
    --gears-sys-typescale-display-medium-font : var(--gears-ref-typeface-brand);
    --gears-sys-typescale-display-small-font : var(--gears-ref-typeface-brand);
    --gears-sys-typescale-display-large-weight : var(--gears-ref-typeface-weight-regular);
    --gears-sys-typescale-display-medium-weight : var(--gears-ref-typeface-weight-regular);
    --gears-sys-typescale-display-small-weight : var(--gears-ref-typeface-weight-regular);
    --gears-sys-typescale-display-large-size : 57px;
    --gears-sys-typescale-display-medium-size : 45px;
    --gears-sys-typescale-display-small-size : 36px;
    --gears-sys-typescale-display-large-line-height : 64px;
    --gears-sys-typescale-display-medium-line-height : 52px;
    --gears-sys-typescale-display-small-line-height : 44px;

    
    --gears-sys-typescale-headline-large-font : var(--gears-ref-typeface-brand);
    --gears-sys-typescale-headline-medium-font : var(--gears-ref-typeface-brand);
    --gears-sys-typescale-headline-small-font : var(--gears-ref-typeface-brand);
    --gears-sys-typescale-headline-large-weight : var(--gears-ref-typeface-weight-regular);
    --gears-sys-typescale-headline-medium-weight : var(--gears-ref-typeface-weight-regular);
    --gears-sys-typescale-headline-small-weight : var(--gears-ref-typeface-weight-regular);
    --gears-sys-typescale-headline-large-size : 32px;
    --gears-sys-typescale-headline-medium-size : 28px;
    --gears-sys-typescale-headline-small-size : 24px;
    --gears-sys-typescale-headline-large-line-height : 40px;
    --gears-sys-typescale-headline-medium-line-height : 36px;
    --gears-sys-typescale-headline-small-line-height : 32px;

    
    --gears-sys-typescale-title-large-font : var(--gears-ref-typeface-brand);
    --gears-sys-typescale-title-medium-font : var(--gears-ref-typeface-plain);
    --gears-sys-typescale-title-small-font : var(--gears-ref-typeface-plain);
    --gears-sys-typescale-title-large-weight : var(--gears-ref-typeface-weight-regular);
    --gears-sys-typescale-title-medium-weight : var(--gears-ref-typeface-weight-medium);
    --gears-sys-typescale-title-small-weight : var(--gears-ref-typeface-weight-medium);
    --gears-sys-typescale-title-large-size : 22px;
    --gears-sys-typescale-title-medium-size : 16px;
    --gears-sys-typescale-title-small-size : 14px;
    --gears-sys-typescale-title-large-line-height : 28px;
    --gears-sys-typescale-title-medium-line-height : 24px;
    --gears-sys-typescale-title-small-line-height : 20px;

    
    --gears-sys-typescale-body-large-font : var(--gears-ref-typeface-plain);
    --gears-sys-typescale-body-medium-font : var(--gears-ref-typeface-plain);
    --gears-sys-typescale-body-small-font : var(--gears-ref-typeface-plain);
    --gears-sys-typescale-body-large-weight : var(--gears-ref-typeface-weight-regular);
    --gears-sys-typescale-body-medium-weight : var(--gears-ref-typeface-weight-regular);
    --gears-sys-typescale-body-small-weight : var(--gears-ref-typeface-weight-regular);
    --gears-sys-typescale-body-large-size : 16px;
    --gears-sys-typescale-body-medium-size : 14px;
    --gears-sys-typescale-body-small-size : 12px;
    --gears-sys-typescale-body-large-line-height : 24px;
    --gears-sys-typescale-body-medium-line-height : 20px;
    --gears-sys-typescale-body-small-line-height : 16px;

    
    --gears-sys-typescale-label-large-font : var(--gears-ref-typeface-plain);
    --gears-sys-typescale-label-medium-font : var(--gears-ref-typeface-plain);
    --gears-sys-typescale-label-small-font : var(--gears-ref-typeface-plain);
    --gears-sys-typescale-label-large-weight : var(--gears-ref-typeface-weight-medium);
    --gears-sys-typescale-label-medium-weight : var(--gears-ref-typeface-weight-medium);
    --gears-sys-typescale-label-small-weight : var(--gears-ref-typeface-weight-medium);
    --gears-sys-typescale-label-large-size : 14px;
    --gears-sys-typescale-label-medium-size : 12px;
    --gears-sys-typescale-label-small-size : 11px;
    --gears-sys-typescale-label-large-line-height : 20px;
    --gears-sys-typescale-label-medium-line-height : 16px;
    --gears-sys-typescale-label-small-line-height : 16px;
    
    --gears-sys-snackbar-fab-spacing : 24px;
    --gears-sys-snackbar-fab-spacing-extra : 0px;

    
    --gears-sys-color-primary:                      var(--gears-ref-palette-primary-40);
    --gears-sys-color-primary-tint:                 var(--gears-ref-palette-primary-50);
    --gears-sys-color-primary-shade:                var(--gears-ref-palette-primary-30);
    --gears-sys-on-primary:                         var(--gears-ref-palette-primary-100);
    --gears-sys-color-inverse-primary:              var(--gears-ref-palette-primary-80);
    --gears-sys-color-primary-container:            var(--gears-ref-palette-primary-90);
    --gears-sys-color-primary-container-tint:       var(--gears-ref-palette-primary-95);
    --gears-sys-color-primary-container-shade:      var(--gears-ref-palette-primary-80);
    --gears-sys-on-primary-container:               var(--gears-ref-palette-primary-10);

    --gears-sys-color-secondary:                    var(--gears-ref-palette-secondary-40);
    --gears-sys-color-secondary-tint:               var(--gears-ref-palette-secondary-50);
    --gears-sys-color-secondary-shade:              var(--gears-ref-palette-secondary-30);
    --gears-sys-on-secondary:                       var(--gears-ref-palette-secondary-100);
    --gears-sys-color-inverse-secondary:            var(--gears-ref-palette-secondary-80);
    --gears-sys-color-secondary-container:          var(--gears-ref-palette-secondary-90);
    --gears-sys-color-secondary-container-tint:     var(--gears-ref-palette-secondary-95);
    --gears-sys-color-secondary-container-shade:    var(--gears-ref-palette-secondary-80);
    --gears-sys-on-secondary-container:             var(--gears-ref-palette-secondary-10);

    --gears-sys-color-tertiary:                     var(--gears-ref-palette-tertiary-40);
    --gears-sys-color-tertiary-tint:                var(--gears-ref-palette-tertiary-50);
    --gears-sys-color-tertiary-shade:               var(--gears-ref-palette-tertiary-30);
    --gears-sys-on-tertiary:                        var(--gears-ref-palette-tertiary-100);
    --gears-sys-color-inverse-tertiary:             var(--gears-ref-palette-tertiary-80);
    --gears-sys-color-tertiary-container:           var(--gears-ref-palette-tertiary-90);
    --gears-sys-color-tertiary-container-tint:      var(--gears-ref-palette-tertiary-95);
    --gears-sys-color-tertiary-container-shade:     var(--gears-ref-palette-tertiary-80);
    --gears-sys-on-tertiary-container:              var(--gears-ref-palette-tertiary-10);
    
    --gears-sys-color-success:                      var(--gears-ref-palette-success-40);
    --gears-sys-color-success-tint:                 var(--gears-ref-palette-success-50);
    --gears-sys-color-success-shade:                var(--gears-ref-palette-success-30);
    --gears-sys-on-success:                         var(--gears-ref-palette-success-0);
    --gears-sys-color-inverse-success:              var(--gears-ref-palette-success-80);
    --gears-sys-color-success-container:            var(--gears-ref-palette-success-90);
    --gears-sys-color-success-container-tint:       var(--gears-ref-palette-success-95);
    --gears-sys-color-success-container-shade:      var(--gears-ref-palette-success-80);
    --gears-sys-on-success-container:               var(--gears-ref-palette-success-10);

    --gears-sys-color-error:                        var(--gears-ref-palette-error-40);
    --gears-sys-color-error-tint:                   var(--gears-ref-palette-error-50);
    --gears-sys-color-error-shade:                  var(--gears-ref-palette-error-30);
    --gears-sys-on-error:                           var(--gears-ref-palette-error-100);
    --gears-sys-color-error-container:              var(--gears-ref-palette-error-80);
    --gears-sys-color-error-container-tint:         var(--gears-ref-palette-error-95);
    --gears-sys-color-error-container-shade:        var(--gears-ref-palette-error-80);
    --gears-sys-on-error-container:                 var(--gears-ref-palette-error-10);

    --gears-sys-color-warning:                      var(--gears-ref-palette-warning-40);
    --gears-sys-color-warning-tint:                 var(--gears-ref-palette-warning-50);
    --gears-sys-color-warning-shade:                var(--gears-ref-palette-warning-30);
    --gears-sys-on-warning:                         var(--gears-ref-palette-warning-100);
    --gears-sys-color-inverse-warning:              var(--gears-ref-palette-warning-80);
    --gears-sys-color-warning-container:            var(--gears-ref-palette-warning-90);
    --gears-sys-color-warning-container-tint:       var(--gears-ref-palette-warning-95);
    --gears-sys-color-warning-container-shade:      var(--gears-ref-palette-warning-80);
    --gears-sys-on-warning-container:               var(--gears-ref-palette-warning-10);
    
    --gears-sys-color-surface:                    #dcedff;
    --gears-sys-color-surface-shade:              #c8e3ff;
    --gears-sys-color-surface-tint:               #f0f7ff;

    --gears-sys-color-surface-container-lowest:     #f0f7ff;
    --gears-sys-color-surface-container-low:        #E2EEFF;
    --gears-sys-color-surface-container:            #dcedff;
    --gears-sys-color-surface-container-high:       #D4E5FF;
    --gears-sys-color-surface-container-highest:    #C6DCFF; 

    --gears-sys-color-on-surface:           #1b2129;
    --gears-sys-color-on-surface-variant:   #49454F;
    --gears-sys-color-outline:              #79747E;
    --gears-outlinevariant-color:           #CAC4D0;
    
    --gears-sys-color-inverse-surface:      #322F35;
    --gears-sys-color-inverse-on-surface:   #F5EFF7;

    --gears-comp-extended-fab-height : 56px;
    --gears-comp-fab-small-height : 40px;
    --gears-comp-fab-height : 56px;
    --gears-comp-fab-large-height : 96px;
    
    --gears-comp-tab-navigation-height : 48px;
    --gears-comp-tab-navigation-height-label : 64px;
    --gears-comp-tab-navigation-color-background : var(--gears-sys-color-surface);
    --gears-comp-tab-navigation-color-focus : var(--gears-ref-palette-primary-90);
    --gears-comp-tab-navigation-color-hover : var(---gears-ref-palette-primary-95);
    --gears-comp-tab-navigation-color-text: var(--gears-sys-color-on-surface);
    --gears-comp-tab-navigation-color-active: var(--gears-sys-color-primary);
    

    --gears-comp-progressbar-track-height:4px;
    --gears-comp-progressbar-indicator-height:4px;
    --gears-comp-progressbar-color-indicator : var(--gears-sys-color-secondary);
    --gears-comp-progressbar-color-track : var(--gears-sys-color-secondary-container);
    
}