:root {
    /* Sizes, Corners and Spacing */
    --large-item-radius:            16px;
    --dialog-border-radius:         16px;
    --large-container-padding:      32px;
    --small-item-radius:            8px;
    --lift-shadow-size:             8px;
    --shallow-inset-size:           4px;
    --shallow-inset-offset:         2px;

    --input-field-margin:           4px 0;
    --input-field-radius:           4px 4px 0 0;
    --input-field-border:           none;
    --input-field-font-size:        12pt;
    --input-field-padding:          4px;

    --small-item-separation-margin: 8px;
    --large-item-separation-margin: 16px;

    --side-menu-width-desktop:      250px;
    --side-menu-width-constrained:  64px;
    --side-menu-width-mobile:       250px;

    --button-outline-thickness:     1px;
    --button-font-size:             10pt;
    --button-padding:               4px;
    --button-min-width:             96px;
    --button-min-height:            48px;
    --button-radius:                var(--small-item-radius);

    --click-pulse-size:             500px;
    --click-pulse-duration:         0.33s;
    --click-pulse-edge:             20%;
    --click-pulse-edge-outer:       20.1%;

    --slide-toggle-width:           40px;
    --slide-toggle-height:          14px;
    --slide-toggle-thumb-width:     20px;
    --slide-toggle-thumb-height:    20px;
    --slide-toggle-thumb-radius:    10px;

    /* Fonts */
    --primary-font:         'roboto-regular', 'DejaVu Sans', sans-serif;
    --monospace-font:       'consolas', 'courier new', 'courier', 'nimbus mono l', monospace;

    /* Colours */
    --text-color:           #fff;
    --body-background:      #333;
    --panel-background:     #222;
    --transparent-panel:    rgba(0,0,0,0.3);
    --shadow:               rgba(0,0,0,0.3);
    --shadow-heavy:         rgba(0,0,0,0.5);
    --clear-bg-hover:       rgba(255,255,255,0.5);

    --neutral:              #808080;
    --neutral-edge:         #b0b0b0;
    --neutral-bottom:       #404040;

    --primary:              #2A587C;
    --primary-highlight:    #436F90;
    --primary-edge:         #6B90AD;
    --primary-low:          #184567;
    --primary-bottom:       #062E4C;
    --primary-desaturated:  #282F35;

    --secondary:            #C09E39;
    --secondary-highlight:  #E0C05F;
    --secondary-edge:       #FFE597;
    --secondary-low:        #9F7F1C;
    --secondary-bottom:     #765902;

    --accent:               #C06039;
    --accent-highlight:     #E0845F;
    --accent-edge:          #FFB597;
    --accent-low:           #9F411C;
    --accent-bottom:        #762302;

    --complement:           #C08639;
    --complement-highlight: #E0A95F;
    --complement-edge:      #FFD397;
    --complement-low:       #9F671C;
    --complement-bottom:    #764502;

    --positive:             #5F9731;
    --positive-highlight:   #87BC5C;
    --positive-edge:        #B7E294;
    --positive-low:         #3D7112;
    --positive-bottom:      #234D00;

    --caution:              #C08639;
    --caution-highlight:    #E0A95F;
    --caution-edge:         #FFD397;
    --caution-low:          #9F671C;
    --caution-bottom:       #764502;

    --warning:              #9F411C;
    --warning-highlight:    #BF5F39;
    --warning-edge:         #E28965;
    --warning-low:          #7A2604;
    --warning-bottom:       #4F1600;

    --info:                 #27845C;
    --info-highlight:       #429A74;
    --info-edge:            #6DB797;
    --info-low:             #136D46;
    --info-bottom:          #02512F;

    /* Interactive Elements */

    --action:               #2D9A2D;
    --action-highlight:     #4DB34D;
    --action-edge:          #7DD17D;
    --action-low:           #167F16;
    --action-bottom:        #025E02;

    --negative:             #C03838;
    --negative-highlight:   #E05F5F;
    --negative-edge:        #FF9797;
    --negative-low:         #9F1C1C;
    --negative-bottom:      #760202;

    --option:               #C07638;
    --option-hightlight:    #E0995F;
    --option-edge:          #FFC697;
    --option-low:           #9F571C;
    --option-bottom:        #763702;

    --link:                 #2A587C;
    --link-hover:           #6B90AD;
    --link-active:          #062E4C;

    --minor-button-bg:      transparent;
    --minor-button-edge:    rgba(255,255,255,0.2);

    --list-item-hover:      var(--primary);
    --lite-item-hover-text: #fff;
    --list-item-active:     var(--primary-bottom);

    --flat-button-hover:    var(--clear-bg-hover);
    --outline-button-hover: var(--clear-bg-hover);

    --click-pulse-bg:       rgba(255,255,255,0.25);

    --input-background:     var(--primary-desaturated);
    --input-text:           #fff;
    --input-placeholder:    rgba(255,255,255,0.4);

    --button-text:          #fff;

    /* Shadows and Depth */
    --lift:                 0 -var(--lift-shadow-size) 0 -var(--shadow);
    --shallow-inset:        inset 0 var(--shallow-inset-offset) var(--shallow-inset-size) -var(--shadow);

    /* Backgrounds */
    --pulse-gradient:       radial-gradient(circle, var(--click-pulse-bg) var(--click-pulse-edge), transparent var(--click-pulse-edge-outer));

    /* Interactive Elements */

    /* --pulse-on-click: Elements that should show the pulse animation when clicked. */
    --pulse-on-click:       button, .button, input[type=button], input[type=checkbox];
}