:root{
  --blue-1:#051E6E;
  --blue-2:#0032B4;
  --blue-3:#1E41F0;
  --white:#FFFFFF;
  --sand-1:#D7BEA5;
  --sand-2:#F0E6D2;
  --sand-3:#FAF7F0;
  --slate:#5A6780;
  --grey:#969696;
  --red:#CD005F;
  --green:#0A6B33;
  --line:#E4E1DA;
  --border-strong:#767676;

  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:40px; --s8:48px; --s9:64px; --s10:96px;

  --font:'Roboto', system-ui, sans-serif;
  --mono:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --t-display:52px;
  --t-h2:24px;
  --t-headline:18px;
  --t-body:18px;
  --t-body-sm:16px;
  --t-small:14px;
  --t-micro:13px;

  --radius-card:4px;
  --radius-pill:999px;
}


a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--blue-3);
  outline-offset:2px;
  border-radius:2px;
}

.on-navy a:focus-visible,
.on-navy button:focus-visible,
.on-navy [tabindex]:focus-visible{
  outline-color:var(--white);
}


@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

@font-face{
  font-family:'Roboto'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('./fonts/roboto-var.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:'Roboto'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('./fonts/roboto-var-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;
}