:root {
  /* ------------------------------------------------
  shared vars (admin panel & profile)
  ------------------------------------------------ */

  /* grayscale */
  --white:        #FFFFFF;
  --light-1:      #F8F9FA;
  --light-2:      #ECEFF1;
  --light-3:      #CFDAE2;
  --gray:         #AEBDCC;
  --dark-1:       #8A97AE;
  --dark-2:       #2A2F3B;
  --dark-3:       #20242E;
  --black:        #181A21;

  /* accent colors */
  --accent:       #FFCD33;
  --accent-light: #FFD65B;
  --accent-dark:  #C4960B;
  --accent-black: #7F6516;


  /* ------------------------------------------------
  admin panel
  ------------------------------------------------ */

  /* UI colors */
  --alert-dark:        #75224D;
  --alert:             #C6315C;
  --alert-light:       #DB64A6;

  --type-number:       #8EB6FF;
  --type-number-dark:  #2D4A7F;

  --type-string:       #B9E28C;
  --type-string-dark:  #62873B;

  --type-boolean:      #FFD65B;
  --type-boolean-dark: #7F6516;

  --type-error:        #DB64A6;
  --type-error-dark:   #75224D;

  /* measurements */
  --cms-nav-height:    2.75rem;
  --sidebar-width:     17rem;
  --toolbox-width:     22.5rem;


  /* ------------------------------------------------
  profile
  ------------------------------------------------ */

  /* any rem units will scale up with the viewport */
  --body-font-scale-sm:   100%;
  --body-font-scale-md:   112.5%;
  --body-font-scale-xl:   125%;

  /* spacing and sizing */
  --nav-height:           50px;
  --subnav-height:        var(--nav-height);
  --container-width:      80rem;
  --hero-container-width: var(--container-width);

  --gutter-xs:            0.5rem;
  --gutter-sm:            0.75rem;
  --gutter-md:            1.5rem;
  --gutter-lg:            2.25rem;
  --gutter-xl:            3rem;

  /* typography */
  --font-xxxs:            0.5rem;
  --font-xxs:             0.625rem;
  --font-xs:              0.75rem;
  --font-sm:              0.875rem;
  --font-md:              1rem;
  --font-lg:              1.25rem;
  --font-xl:              1.5rem;
  --font-xxl:             2rem;

  /* base (p, li, etc.) */
  --base-font-stack:        'Lato', 'Trebuchet MS', sans-serif;
  --base-font-weight:       400;
  --base-letter-spacing:    0;
  --bold-weight:            800;

  /* headings (h1, h2, etc.; .heading class) */
  --heading-font-stack:     var(--base-font-stack);
  --heading-font-weight:    600;
  --heading-text-transform: none;
  --heading-letter-spacing: 0;

  /* display (.display class) */
  --display-font-stack:     var(--base-font-stack);
  --display-font-weight:    600;
  --display-text-transform: uppercase;
  --display-letter-spacing: 0.0125em;

  /* label (.label class) */
  --label-font-stack:       var(--base-font-stack);
  --label-font-weight:      400;
  --label-text-transform:   uppercase;
  --label-letter-spacing:   0.0125em;

  /* hero AKA header AKA splash */
  --hero-bg-color:            var(--dark-3);
  --hero-img-overlay-opacity: 0.875;
  --hero-text-color:          var(--light-2);
  --hero-paragraph-size:      var(--font-xs);
  --hero-heading-color:       var(--white);
  --hero-heading-size:        var(--font-xxl);
  --hero-subhead-color:       var(--white);
  --hero-subhead-size:        var(--font-md);
  --hero-stat-value-color:    var(--accent);
  --hero-viz-width:           20rem;

  /* sections */
  --section-bg-odd:             var(--white);
  --section-bg-even:            var(--light-1);
  --section-text-color:         var(--dark-2);
  --section-heading-color:      var(--dark-3);
  /* sticky sections */
  --sticky-section-offset:      50px;
  --sticky-section-height:      var(--nav-height);
  --sticky-section-bg-color:    var(--white);
  --sticky-section-shadow:      0 1px 0.375rem color(var(--black) a(0.125));
  /* handle grouped SingleColumn sections with flex-basis */
  --singlecolumn-column-count:  3;
  --singlecolumn-min-width:     20rem;
  /* handle MultiColumn section with css multicolumn */
  --multicolumn-column-count:   3;
  --multicolumn-column-width:   20rem;
  --multicolumn-column-gap:     var(--gutter-xl);
  /* InfoCard */
  --infocard-viz-min-width:     10rem;
  --infocard-border-radius:     4px;
  --infocard-border-width:      1px;
  --infocard-border-color:      var(--light-2);
  --infocard-divider-color:     var(--dark-3);
  --infocard-subhead-color:     var(--dark-3);
  --infocard-header-bg-color:   var(--dark-3);
  --infocard-stat-bg-color:     var(--accent-light);
  --infocard-header-text-color: var(--white);
  --infocard-main-bg-color:     var(--white);
  /* Grouping (intro) section */
  --grouping-bg-color:          var(--accent-light);
  --grouping-text-color:        var(--black);
  --grouping-paragraph-size:    var(--font-md);
  --grouping-subhead-color:     var(--accent-black);
  --grouping-subhead-font-size: var(--font-xl);
  --grouping-heading-color:     var(--white);
  --grouping-heading-font-size: var(--font-xxl);
  --grouping-stat-value-color:  var(--white);

  /* buttons */
  --button-border-radius:       2px;
  --button-border-width:        1px;
  --button-bg-color:            color(var(--white) a(0.5));
  --button-border-color:        var(--light-3);
  --button-color:               var(--accent-black);
  --button-padding:             0.5em 1.25em;
  --button-hover-bg-color:      var(--accent-black);
  --button-hover-border-color:  var(--accent-black);
  --button-hover-color:         var(--white);

  /* fields */
  --field-border-radius:        1px;
  --field-border-width:         1px;
  --field-padding:              0.5em 0.5em 0.575em 0.5em;
  --field-font-weight:          400;
  --field-bg-color:             var(--white);
  --field-border-color:         var(--light-3);
  --field-color:                var(--dark-2);
  --field-placeholder-color:    var(--gray);
  --field-focus-color:          var(--accent-dark);
  --field-icon-color:           var(--dark-1);
  --field-icon-hover-color:     var(--dark-3);
  --select-border-radius:       var(--button-border-radius);
  --select-bg-color:            var(--light-1);

  /* visualizations */
  --viz-aspect-ratio:           50%;
  --viz-min-height:             40vh;

  /* (react-)table visualization */
  --table-height:               60vh;
  --table-hgroup-bg-color:      var(--light-2);
  --table-hgroup-border-color:  var(--light-3);
  --table-hgroup-text-color:    var(--dark-3);
  --table-thead-bg-color:       var(--dark-1);
  --table-thead-border-color:   color(var(--dark-2) a(0.25));
  --table-thead-text-color:     var(--light-1);
  --table-cell-bg-color:        var(--white);
  --table-cell-border-color:    var(--light-2);
  --table-cell-text-color:      var(--dark-3);
  --table-nested-cell-bg-color: var(--light-1);
  --table-icon-color:           var(--dark-2);

  /* stats */
  --stat-label-font-size:       var(--font-sm);
  --stat-label-color:           inherit;
  --stat-value-font-size:       var(--font-xl);
  --stat-value-color:           var(--accent-dark);
  --stat-subtitle-font-size:    var(--font-xs);
  --stat-subtitle-color:        var(--dark-1);
  --stat-group-stat-width:      9rem;


  /* ------------------------------------------------
  legacy canon vars
  ------------------------------------------------ */
  --light:                      var(--light-3);
  --dark:                       var(--dark-2);
  --gutter:                     1rem;
  --column:                     64px;

  --font-family:                var(--base-font-stack);
  --topic-title-color:          var(--black);
  --topic-title-family:         var(--base-font-stack);
  --topic-title-size:           48px;
  --topic-title-weight:         300;
  --section-title-color:        var(--dark);
  --section-title-family:       var(--base-font-stack);
  --section-title-size:         24px;
  --section-title-weight:       600;
  --section-article-color:      var(--dark);
  --section-article-family:     var(--base-font-stack);
  --section-article-size:       16px;
  --section-article-weight:     400;
  --section-article-small:      calc(var(--column) * 3 + var(--gutter) * 2);
  --section-article-large:      calc(var(--column) * 5 + var(--gutter) * 4);
}