/* tokens.css - Smart Render Somerset. Every colour here is the logo's, measured (_research/logo-measure.json):
   the black ground of the mark, the white of the wordmark, and the teal of "Machine Applied Specialists"
   (#236269 shadow, #267873 body, #329191 the bright core of the letters). Tints and neutrals sit with them.
   Contrast pairs (WCAG, checked by hand):
     white #fff on black #000 ............... 21:1      teal-core #329191 on black ....... 5.6:1 (eyebrows)
     white on teal #267873 (buttons) ........ 5.2:1     white on teal-deep #236269 ....... 7.0:1 (sites band)
     teal-pale #bfe3df on #236269 ........... 5.0:1     ink #0b0f0f on paper #eef0ee ..... 17:1
     teal-deep #236269 on paper ............. 6.0:1     mute #4a5554 on paper ............ 6.7:1
     mute-dark #a9b4b2 on black ............. 9.9:1     field line #7d8886 on white ...... 3.6:1 (non-text, 3:1) */

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/Oswald-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Sofia Sans";
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url(/fonts/SofiaSans-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Oswald Fallback";
  src: local("Arial Narrow");
  size-adjust: 109.94%;
  ascent-override: 108.51%;
  descent-override: 26.29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Sofia Sans Fallback";
  src: local("Arial");
  size-adjust: 99.45%;
  ascent-override: 90.5%;
  descent-override: 30.17%;
  line-gap-override: 0%;
}

:root {
  /* the mark's ground and its blacks */
  --black: #000000;
  --black-1: #070a0a;
  --black-2: #0e1414;
  --black-3: #172020;
  --line-dark: #263333;

  /* the wordmark's white and the white-render band */
  --white: #ffffff;
  --paper: #eef0ee;
  --paper-2: #e1e5e3;
  --ink: #0b0f0f;
  --mute: #4a5554;
  --mute-dark: #a9b4b2;
  --field-line: #7d8886;

  /* the teal of "Machine Applied Specialists" */
  --teal-ink: #17474b;
  --teal-deep: #236269;
  --teal: #267873;
  --teal-core: #329191;
  --teal-pale: #bfe3df;

  /* render colours for the chooser and the placeholders (named in the words: White, Cream, Sand, Stone, Grey, Charcoal) */
  --r-white: #f3f2ee;
  --r-cream: #ebe1c7;
  --r-sand: #d8c29b;
  --r-stone: #b9ae98;
  --r-grey: #9c9f9d;
  --r-charcoal: #3e4143;
  --r-base: #6b6e6c;

  --font-display: "Oswald", "Oswald Fallback", "Arial Narrow", sans-serif;
  --font-text: "Sofia Sans", "Sofia Sans Fallback", Arial, sans-serif;

  --gut: 20px;
  --max: 1240px;
  --pad: 40px;
  --hdr-h: 76px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --grain-fine: url(/assets/img/grain/fine.svg);
  --grain-scraped: url(/assets/img/grain/scraped.svg);
  --grain-smooth: url(/assets/img/grain/smooth.svg);
  --grain-coarse: url(/assets/img/grain/coarse.svg);
}

@media (min-width: 768px) {
  :root { --gut: 32px; --pad: 72px; --hdr-h: 84px; }
}
@media (min-width: 1024px) {
  :root { --hdr-h: 96px; }
}
@media (min-width: 1280px) {
  :root { --gut: 48px; --pad: 96px; --hdr-h: 100px; }
}