:root {
  --fg-pale-background:      #f9f7f4;
  --fg-dark-brown-black:     #2f2d2c;
  --fg-linen:                #f2eee8;

  --fg-0-dark-apple-green:   #385125;
  --fg-0-apple-green:        #5f8841;
  --fg-0-light-apple-green:  #aecf52;
  --fg-0-bright-apple-green: #e6f991;
  --fg-0-pastel-apple-green: #f8fbed;

  --fg-i-dark-blue:          #003a53;
  --fg-i-blue:               #166f96;
  --fg-i-light-blue:         #29ade5;
  --fg-i-pale-blue:          #b9e6f9;
  --fg-i-pastel-blue:        #edf4f8;

  --fg-ii-dark-burnt-orange: #481f0c;
  --fg-ii-burnt-orange:      #ca5c17;
  --fg-ii-bright-orange:     #ff4d20;
  --fg-ii-pastel-orange:     #f5ebe5;
  --fg-ii-light-orange:      #ffcaad;

  --fg-iii-dark-violet:      #2d3378;
  --fg-iii-mid-violet:       #5c55bf;
  --fg-iii-bright-violet:    #7066ff;
  --fg-iii-light-violet:     #afb3ff;
  --fg-iii-pastel-violet:    #e8e5f6;

  --fg-iv-dark-pine-green:   #194a4b;
  --fg-iv-pine-green:        #29797a;
  --fg-iv-bright-pine-green: #36bdb6;
  --fg-iv-pastel-pine-green: #e9f5f4;

  --fg-v-dark-purple:        #43173a;
  --fg-v-purple:             #62004d;
  --fg-v-bright-purple:      #b200a6;
  --fg-v-light-purple:       #e77df8;
  --fg-v-pale-purple:        #ffdaf7;
  --fg-v-pastel-purple:      #f6eff5;

  --fg-vi-brown-mustard:     #595038;
  --fg-vi-mustard:           #a97c00;
  --fg-vi-yellow-mustard:    #f4cf00;
  --fg-vi-pastel-yellow-mustard: #fbf7e8;

  --derived-pastel-violet:   #f3f1fa;

  --legacy-pale-background-old: #faf9f5;
  --legacy-lavender:            #b9a6ff;
  --legacy-burnt-orange:        #ca5017;
  --legacy-light-green:         #d7e8de;
  --legacy-bright-blue:         #7bd7ff;
  --legacy-white:               #ffffff;
  --legacy-black:               #000000;

  --paper:     var(--fg-pale-background);
  --linen:     var(--fg-linen);
  --ink:       var(--fg-dark-brown-black);
  --ink-black: var(--legacy-black);

  --brand-triad-1: var(--fg-iv-pine-green);
  --brand-triad-2: var(--fg-ii-burnt-orange);
  --brand-triad-3: var(--fg-iii-bright-violet);

  --footer-rule:        var(--fg-iii-bright-violet);
  --footer-heading-ink: var(--fg-iii-light-violet);
  --footer-brand-ink:   var(--fg-iii-pastel-violet);

  --hairline-soft:      rgba(0, 0, 0, 0.12);
  --hairline-soft-dark: rgba(249, 247, 244, 0.24);
  --hairline-nav:       rgba(0, 0, 0, 0.4);
  --hairline-w:         1px;

  --ff-display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --ff-sans:    "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --ff-serif:   "Source Serif 4", "Iowan Old Style", Georgia, serif;

  --role-display:    300 40px/46px var(--ff-display);
  --role-heading:    400 34px/40px var(--ff-display);
  --role-title:      400 28px/38px var(--ff-display);
  --role-feature:    400 26px/34px var(--ff-serif);
  --role-lede:       500 20px/32px var(--ff-serif);
  --role-para-title: 500 20px/28px var(--ff-display);
  --role-body:       400 18px/29px var(--ff-serif);
  --role-body-sans:  300 18px/28px var(--ff-sans);
  --role-label:      500 18px/25px var(--ff-sans);
  --role-ui:         500 16px/26px var(--ff-display);
  --role-meta:       400 14px/20px var(--ff-sans);
  --role-micro:      400 13px/20px var(--ff-sans);

  --t-display-xl:        var(--role-display);
  --t-display-lg:        var(--role-heading);
  --t-display-contents:  var(--role-heading);
  --t-section-title:     var(--role-title);
  --t-panel-title:       var(--role-title);
  --t-chapter-title:     400 28px/38px var(--ff-serif);
  --t-testimonial:       500 28px/38px var(--ff-serif);
  --t-quote-alt:         400 28px/38px var(--ff-sans);

  --t-quote:             var(--role-feature);
  --t-pullout-title:     400 26px/34px var(--ff-display);
  --t-contents-title:    var(--role-feature);
  --t-big-statement:     400 26px/34px var(--ff-sans);
  --t-subhead:           400 26px/34px var(--ff-sans);
  --t-testimonial-name:  400 26px/34px var(--ff-sans);

  --t-body-lede:         var(--role-lede);
  --t-body-lede-tight:   400 20px/32px var(--ff-serif);
  --t-attribution-italic: italic 500 20px/32px var(--ff-serif);

  --t-para-title:        var(--role-para-title);
  --t-card-title:        var(--role-para-title);
  --t-heading-sans:      500 20px/28px var(--ff-sans);
  --t-table-label:       400 20px/28px var(--ff-sans);

  --t-body:              var(--role-body);
  --t-body-italic:       italic 400 18px/29px var(--ff-serif);
  --t-table-cell:        var(--role-body);
  --t-introband-body:    400 17px/34px var(--ff-serif);

  --t-body-sans:         var(--role-body-sans);
  --t-sidebar-label:     var(--role-body-sans);
  --t-body-sans-reg:     400 18px/28px var(--ff-sans);
  --t-card-body:         var(--t-body-sans-reg);
  --t-body-sans-med:     500 18px/28px var(--ff-sans);
  --t-quote-attrib:      500 18px/28px var(--ff-sans);
  --t-definition-note:   italic 400 18px/28px var(--ff-sans);

  --t-part-label:        var(--role-label);
  --t-tldr-lead:         var(--role-label);
  --t-pullout-lead:      var(--role-label);
  --t-term:              var(--role-label);
  --t-section-eyebrow:   500 18px/25px var(--ff-display);
  --t-fact:              400 18px/25px var(--ff-sans);
  --t-testimonial-role:  400 18px/25px var(--ff-sans);
  --t-wordmark:          500 18px/25px var(--ff-display);
  --t-wordmark-italic:   italic 500 18px/25px var(--ff-serif);
  --t-footer-heading:    400 18px/25px var(--ff-display);
  --t-footer-contact:    500 18px/25px var(--ff-display);
  --t-blob-label:        300 18px/25px var(--ff-display);

  --t-eyebrow-italic:    italic 500 22px/44px var(--ff-serif);
  --tr-eyebrow-italic:   0.22px;

  --t-footer-wordmark:        var(--role-ui);
  --t-footer-wordmark-italic: italic 500 16px/26px var(--ff-serif);
  --t-button:            var(--role-ui);
  --t-nav-link:          var(--role-ui);
  --t-caption:           400 16px/26px var(--ff-sans);

  --t-table-card-cell:   var(--role-meta);
  --t-meta:              var(--role-meta);
  --t-meta-med:          500 14px/20px var(--ff-sans);
  --t-newsletter-title:  400 22px/32px var(--ff-display);
  --t-colophon:          400 14px/20px var(--ff-serif);
  --t-footer-link:       400 14px/20px var(--ff-serif);

  --t-sidebar-reg:       var(--role-micro);
  --t-sidebar-bold:      600 13px/20px var(--ff-sans);
  --t-micro-med:         500 13px/20px var(--ff-sans);
  --t-figcaption-art:    var(--role-micro);
  --t-table-tag:         600 13px/20px var(--ff-sans);

  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   29px;
  --s-8:   32px;
  --s-9:   40px;
  --s-10:  48px;
  --s-11:  64px;
  --s-12:  77px;
  --s-13:  96px;
  --s-14:  104px;
  --s-15:  128px;
  --s-16:  160px;

  --band-pad-y:      var(--s-13);
  --band-pad-y-lg:   var(--s-16);
  --module-gap:      var(--s-11);

  --canvas:        1440px;
  --page-pad:      24px;
  --col-gutter:    550px;
  --col-text:      650px;
  --col-rail:      190px;
  --col-home:      510px;
  --col-quote:     590px;
  --col-card:      1349px;
  --col-tldr:      1169px;
  --col-popbox:    734px;
  --quote-inset:   40px;
  --toc-w:         265px;
  --nav-h:         77px;
  --hero-band-h:   198px;
  --hero-compact-h: 56px;
  --accent-bar-h:  4px;

  --r-0:      0px;
  --r-card:   10px;
  --r-panel:  12px;
  --r-pill:   200px;

  --texture-grain: url("../assets/textures/grain.png");

  --texture-opacity: 0.49;
  --header-texture-opacity: 0.52;
  --callout-opacity: 0.6;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 900px) {
  :root {
    --role-body:     400 16.5px/26px var(--ff-serif);
    --t-body-italic: italic 400 16.5px/26px var(--ff-serif);
    --s-7: 26px;
  }
}