:root {
    --c-grey-01:           hsl(0 0% 24%);
    --c-grey-02:           hsl(0 0% 48%);
    --c-grey-03:           hsl(0 0% 72%);
    --c-grey-04:           hsl(0 0% 88%);
    --c-grey-05:           hsl(0 0% 92%);
    --c-grey-06:           hsl(0 0% 96%);
    --c-grey-07:           hsl(0 0% 98%);

    --c-blue:              hsl(220 84% 54%);
    --c-blue-light:        hsl(220 84% 95%);
    --c-blue-dark:         hsl(220 84% 48%);
    --c-green:             hsl(136 63% 45%);
    --c-green-light:       hsl(136 63% 93%);
    --c-red:               hsl(336 70% 50%);
    --c-red-light:         hsl(336 70% 95%);
    --c-orange:            hsl(30 94% 52%);
    --c-orange-light:      hsl(30 94% 94%);
    --c-orange-dark:       hsl(30 94% 46%);
    --c-pink:              hsl(318 100% 46%);
    --c-white:             hsl(0 0% 100%);
    --c-yellow:            hsl(43 100% 40%);
    --c-yellow-light:      hsl(43 100% 70%);

    --gradient-01: linear-gradient(45deg, #d50951 32%, #931c80 92%);
    --gradient-02: linear-gradient(45deg, #f8b032 0%, #d50951 72%);
    --gradient-03: linear-gradient(45deg, #941c80 22%, #f8b032 70%);

    --c-text:              var(--c-grey-01);

    --c-primary:           var(--c-blue);
    --c-primary-hover:     var(--c-blue-dark);
    --c-primary-light:     var(--c-blue-light);

    --c-selected:          var(--c-grey-01);

    --c-secondary:         var(--c-orange);
    --c-secundary-hover:   var(--c-orange-dark);
    --c-secondary-light:   var(--c-orange-light);

    --c-third:             var(--c-green);
    --c-third-light:       var(--c-green-light);

    --c-focus:             var(--c-blue); /* blauw */
    --c-focus-light:       var(--c-blue-light);

    --c-btn-border:        hsl(80 99% 32%); /* groen */
    --c-btn-border-darker: hsl(80 99% 28%);
    --c-icon-hover:        var(--c-grey-06);
    --c-filter-bottom:     var(--c-grey-05);
    --c-filter-bg:         hsl(202 59% 71%); /* ijsblauwig */
    --c-filter-icon:       hsl(202 78% 43%);

    --c-summary:           var(--c-grey-06);
    --c-nav-chevron:       var(--c-grey-03);
    --c-alert:             var(--c-yellow);
    --c-alert-light:       var(--c-yellow-light);
    --c-flow-started:      var(--c-nav-chevron);

    --c-notification-bar-1: var(--c-third);
    --c-notification-bar-2: var(--c-secondary);
    --c-notification-bar-3: var(--c-primary);

    --c-task-done:         var(--c-third);
    --c-task-due:          var(--c-primary);
    --c-task-due-light:    var(--c-primary-light);
    --c-task-flagged:      hsl(300 92% 30%); /* paars */

    --fill-mainpanel:      var(--c-white);
    --fill-navbar:         var(--c-white);
    --fill-helpdesk-page:  var(--c-grey-06);

    --fill-thead:                var(--c-grey-05);
    --fill-total:                var(--c-grey-07);
    --fill-offerrule:            var(--c-grey-06);
    --fill-offerrule-hover:      var(--c-grey-05);
    --fill-offerrule-selected:   var(--c-blue-light);

    --fill-section-title:        var(--c-white);

    --c-thead:                   var(--c-text);
    --c-total:                   var(--c-text);

    --border-grey:         var(--c-grey-04);
    --border-grey-light:   var(--c-grey-06);

    --bg-topbar:              var(--c-grey-06);
    --bg-btn:                 var(--c-grey-05);
    --bg-pie-charts:          var(--c-white);
    --bg-tramline-tasks-info: var(--c-grey-06);
    --bg-nav-gradient:        linear-gradient(-46deg, #f29c3a 0%, #db2f56 70%, #db2f56 100%);
    --nav-gradient-deg:       -46deg;

    --svg-fill-layer1:     var(--c-text);  /* property is set in css */
    --svg-fill-layer2:     var(--c-white); /* property is set in svg */

    --bg-code:              var(--c-grey-06);
    --border-code:          var(--c-grey-04);

    --bg-offer: var(--c-grey-03);

    /* task type filter colors, used to set svg image color:
       ---------------------------------------------------- */
    --task-other:          var(--c-grey-04);
    --task-done:           var(--c-third);
    --task-open:           var(--c-primary);
    --task-due:            var(--c-secondary);
    --task-on-hold:        var(--c-orange);
    --task-flagged:        var(--c-red);

    --theme-logo-pinned:   url("theme-tandemdrive/logo-black.svg");
    --theme-logo-unpinned: url("theme-tandemdrive/logo-swirl-black.svg");
    --theme-logo-size-unpinned: 5rem;
    --theme-logo-size-pinned:   15rem;

    --c-local-menu-item:       var(--c-text);
    --c-local-menu-item-hover: var(--c-white);

    --fill-build-offer-btn:       var(--c-grey-06);
    --fill-build-offer-btn-hover: var(--c-grey-04);
    --fill-paper-preview:         var(--c-white);
}