@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-stretch: 100%;
  font-display: swap;
  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: "Mona Sans";
  src: url("../assets/fonts/MonaSans-Variable.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  
  --font-instrument: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mona: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  
  --font-ui: var(--font-instrument);   
     

  
  --petrol: #0c4242;
  --emerald: #12624B;
  --ivory: #F7F4F0;
  --taupe: #C1BC9E;
  --sage: #BFCC99;

  
  --void: #03100F;
  --canvas: #0A1E1C;
  --canvas-2: #0E2624;
  --canvas-3: #123230;

  
  --dim: rgba(247, 244, 240, .72);
  --faint: rgba(247, 244, 240, .58);
  --hair: rgba(247, 244, 240, .13);
  --hair-2: rgba(247, 244, 240, .07);

  
  --field-border-dark: rgba(247, 244, 240, .38);   

  
  --on-ivory: var(--petrol);
  --on-ivory-strong: rgba(12, 66, 66, .88);
  --on-ivory-soft: rgba(12, 66, 66, .80);
  --on-ivory-placeholder: rgba(12, 66, 66, .72);
  --field-border-light: rgba(12, 66, 66, .62);     

  
  --err-on-dark: #F5A3A3;
  --err-on-light: #A3312B;

  
  --pad: clamp(1.15rem, 4vw, 4rem);
  --inset: clamp(0px, 1.2vw, 16px);

  
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ease: linear; }
}