/* Velin design tokens (source: 02-brand/tokens.json) */
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-italic.woff2") format("woff2"); font-weight: 300 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }

:root {
  /* colour: vellum page, clay ink, umber black */
  --vellum: #ECE6DC;
  --vellum-hi: #F5F1EA;
  --paper: #FBF9F5;
  --ink: #2A2421;
  --clay: #6B4F45;
  --clay-soft: #7C5D52;
  --on-clay: #F5F1EA;
  --on-clay-soft: #D9CDBE;
  --rule: rgba(107, 79, 69, .15);
  --rule-on-clay: rgba(245, 241, 234, .17);
  --dash: rgba(107, 79, 69, .5);
  --tint: rgba(107, 79, 69, .1);
  --tile: rgba(107, 79, 69, .12);
  --veil: rgba(56, 33, 22, .5);

  /* type */
  --serif: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --fs-h1: 104px;   /* uppercase display */
  --fs-h2: 70px;
  --fs-h3: 46px;
  --fs-h4: 38px;
  --fs-nav: 25px;

  /* layout */
  --gutter: 24px;
  --header: 89px;
  --r-card: 24px;
  --r-media: 10px;
  --r-btn: 8px;

  /* motion: the reference's own curves */
  --ease-out: cubic-bezier(.33, 1, .68, 1);
  --ease-io: cubic-bezier(.42, 0, .58, 1);
}