/* ————————————————————————————————————————————————————————
   dr-navy — tokens.css
   Archivo (SIL Open Font License 1.1), self-hosted variable fonts:
   one roman and one italic file per subset, covering weights 100–900
   and widths 62–125%. Latin first, latin-ext second; the browser picks
   by unicode-range and loads latin-ext only when a page needs it.
   ———————————————————————————————————————————————————————— */

@font-face {
  font-family: "Archivo";
  src: url("./fonts/Archivo-Roman.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; 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: "Archivo";
  src: url("./fonts/Archivo-Roman.latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("./fonts/Archivo-Italic.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; 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: "Archivo";
  src: url("./fonts/Archivo-Italic.latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Palette: navy from the portrait's polo, stone from its backdrop. */
:root {
  --navy:        #0f2240;
  --navy-deep:   #0a1830;
  --ink:         #0f2240;   /* body text is navy, not black */
  --ink-2:       #46516a;   /* secondary text on white */
  --ink-3:       #23324f;   /* text on stone */
  --paper:       #ffffff;
  --paper-2:     #f3f4f7;   /* quiet fills: code, inputs */
  --stone:       #d3d0ca;
  --rule:        #e1e4ea;
  --rule-2:      #c6ccd6;
  --link-hover:  #3b5bdb;
  --on-navy:     #ffffff;
  --on-navy-2:   #dbe2f3;
  --on-navy-3:   #b8c6ee;
  --ok:          #17694a;
  --err:         #b42318;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Type scale */
  --fs-hero:   clamp(64px, 8.2vw, 128px);
  --fs-title:  clamp(40px, 5.6vw, 76px);
  --fs-h2:     clamp(34px, 3.8vw, 52px);
  --fs-h3:     clamp(22px, 2.1vw, 28px);
  --fs-lede:   23px;
  --fs-body-lg: 20px;
  --fs-body:   18px;
  --fs-sm:     16px;
  --fs-xs:     15px;

  --wide: 125%;   /* font-stretch for display type */

  /* Spacing */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 112px;

  --container: 1240px;
  --gutter: 48px;
  --measure: 66ch;

  --focus: 3px solid var(--link-hover);
}
@media (max-width: 860px) {
  :root { --gutter: 20px; --space-8: 72px; --fs-lede: 20px; }
}