@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-latin-600-800.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00A3, U+00A5-00AC, U+00AE-00FF, U+0102, U+0131,
    U+0152-0153, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022,
    U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial");
  size-adjust: 106.5%;
  ascent-override: 87.3%;
  descent-override: 25.4%;
  line-gap-override: 0%;
}

:root {
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", -apple-system, "Segoe UI",
    Roboto, Arial, sans-serif;
  --font-body: -apple-system, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;

  --r-ctl: 10px;
  --r-card: 14px;
  --r-pill: 999px;


  --white:     #ffffff;
  --band:      #f4f6f3;
  --band-2:    #eef2ee;

  --ink:       #14181a;
  --muted:     #55625b;
  --faint:     #626f69;

  --border:    #828f88;
  --rule:      #dce3de;
  --rule-soft: #e8edea;

  --green-900: #123123;
  --green-800: #1a462e;
  --green-700: #235c3b;
  --green-600: #2e7d4f;
  --green-500: #6fc08f;
  --green-100: #dceae2;
  --green-50:  #eff6f2;

  --blue-800:  #09547d;
  --blue-600:  #0b6fa4;
  --blue-400:  #0099d8;
  --blue-100:  #dceaf4;
  --blue-50:   #eff5fa;

  --amber-600: #9a5b00;
  --amber-100: #fbf0dd;
  --red-600:   #b3261e;
  --red-100:   #fceae7;
}