/* WCAG pairs enforced by scripts/brand/check.ts: --color-text on --color-bg and
   --color-bg-deep; --color-text-on-light on --color-surface and --color-surface-bright. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-normal-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --field: #c4a27f;
  --field-deep: #b8946f;
  --ink: #1c1511;
  --ink-soft: #43342a;
  --bone: #f6ecdc;
  --bone-bright: #fbf6ee;
  --ember: #ffb547;
  --clay: #6e4630;

  --color-bg: var(--field);
  --color-bg-deep: var(--field-deep);
  --color-text: var(--ink);
  --color-surface: var(--bone);
  --color-surface-bright: var(--bone-bright);
  --color-text-on-light: var(--ink);

  --rule: rgba(28, 21, 17, 0.32);

  --font: "Fraunces", "Iowan Old Style", Georgia, serif;
  --text: clamp(19px, 1.45vw, 22px);
  --text-small: 15px;
  --display: clamp(46px, 7.2vw, 112px);

  --gutter: clamp(22px, 5vw, 88px);
  --measure: 34em;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}