/* Design tokens — decided values only (see /styleguide.html for how we
   got here: Saffron over Acid Citrus, Option A over B/C). */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../fonts/archivo-expanded-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../fonts/archivo-expanded-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette */
  --ink:    #3c4245;
  --sage:   #729192;
  --paper:  #dfcdc4;
  --text:   #5f6769;
  --accent: #e9b44c; /* saffron */

  /* type faces */
  --font-display: 'Archivo Expanded', sans-serif;
  --font-body:    'Archivo', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* type scale — fluid between 380px and desktop */
  --display-xl: clamp(3rem, 2.2vw + 2.5rem, 6rem);           /* 48px  -> 96px */
  --display-l:  clamp(2rem, 1.6vw + 1.6rem, 3.5rem);         /* 32px  -> 56px */
  --body:       clamp(1.0625rem, 0.15vw + 1rem, 1.1875rem);  /* 17px  -> 19px */
  --body-s:     clamp(0.9375rem, 0.1vw + 0.9rem, 1rem);      /* 15px  -> 16px */
  --mono-caption: clamp(0.75rem, 0.05vw + 0.72rem, 0.8125rem); /* 12px -> 13px */
  --mono-micro: 0.6875rem; /* 11px, fixed */

  /* motion */
  --dur-flip: 720ms;
  --dur-fade: 380ms;
  --ease-flip: cubic-bezier(.6, 0, .2, 1);
}