@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/bricolage-400_800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/bricolage-400_800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/karla-400_700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/karla-400_700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/courierprime-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/courierprime-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {

  --teal:         #216B7E;
  --sidecar:      #F3E8BC;
  --oatmeal:      #F5F2EB;

  --bg:           var(--oatmeal);   
  --surface:      var(--sidecar);   
  --surface-2:    #E7D9A6;   

  --border:       #D5CCBC;   
  --border-doc:   #D6C48A;   

  --ink:          var(--teal);     
  --ink-2:        #2F5B58;   
  --ink-3:        #66827E;   

  --accent:       var(--teal);     
  --accent-ink:   var(--sidecar);  

  --plane:        var(--teal);
  --plane-ink:    var(--sidecar);  
  --plane-ink-2:  #F2E0B8;   
  --plane-line:   rgba(243,232,188,.26);

  --plane-accent: #FFDCAF;   

  --rec:          #A83520;
  --rec-soft:     rgba(168,53,32,.10);
  --amber:        #7A5310;   
  --green:        #2F5B58;

  --paper:        #FAF3D9;   
  --paper-ink:    #05403F;   
  --mono-ink:     #2A5350;   

  --prov-ink:     #8E2E1B;   
  --prov-bg:      #F6E3DC;
  --prov-border:  #E3BFB3;

  --shadow-paper: 6px 6px 0 rgba(33,107,126,.14);

  --f-ui:      'Karla', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --f-display: 'Bricolage Grotesque', 'Karla', system-ui, sans-serif;
  --f-mono:    'Courier Prime', 'Courier New', ui-monospace, monospace;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --r-panel: 0; --r-btn: 0; --r-pill: 0;
  --measure: 62ch;

  --rule: 1px;
  --rule-heavy: 2px;
}