/*
 * Brand tokens. PLACEHOLDERS taken from the mockup until the real values
 * arrive in /brand. Swap values here; nothing else should need to change.
 */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 800 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  /* Colour */
  --c-ink: #111111;
  --c-ink-soft: #2a2a2a;
  --c-white: #ffffff;
  --c-paper: #f4f4f0;
  --c-panel: #f2f2ee;
  --c-line: #d9d9d4;
  --c-yellow: #f9d13e;
  --c-muted: #555555;        /* on paper/white: 7.4:1 */
  --c-muted-dark: #bdbdbd;   /* on ink: 10:1 */
  --c-score-off: #3a3a3a;
  --c-error: #b3261e;        /* on white: 6.5:1 */

  /* Type */
  --font-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-display-stretch: 112%;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Shape */
  --border: 3px;
  --shadow-offset: 14px;
  --radius: 0;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.75, 0.2, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 380ms;
  --dur-slow: 640ms;
}