/* Beyond Hand to Mouth design tokens. Every colour, font family, size and spacing value is defined once here. */
:root {

  /* Colour */
  --paper: #fdfcfa; /* Page ground. Default background for every section. */
  --linen: #f3f1ec; /* Soft panel ground: hero text panels, alternating sections, form fields. */
  --stone: #e4e0d6; /* Call-to-action bands and gallery ground. Ink text only. */
  --greige: #bab5a6; /* The question panel on Home. Ink text only; never paper text on it. */
  --sand: #cfc6b5; /* Number discs on service cards. Ink numerals on it. */
  --line: #d9d3c8; /* Hairline rules, card borders, field borders on paper and linen. */
  --ink: #231b17; /* Primary text on paper, linen, stone, greige and sand. Footer ground. */
  --muted: #5f5750; /* Secondary text and captions on paper and linen (6.9:1 on paper). */
  --taupe: #7d7064; /* Script accents and signatures, 24px and up, on paper and linen. */
  --bronze: #8a6440; /* Short rules, check marks, numerals and link text on paper and linen (5.2:1 on paper, 4.7:1 on linen). */
  --oxblood: #6e3434; /* Primary button fill and active nav rule. Paper text on it (9.3:1). */
  --oxblood-deep: #562626; /* Primary button hover and pressed. */
  --on-ink: #f3ece3; /* Text on the ink footer (14:1). */
  --on-ink-muted: #b9aea2; /* Secondary text on the ink footer (7.8:1). */
  --focus: #8a6440; /* Focus ring, 2px solid, on every surface. */

  /* Font families */
  --font-serif: "Cormorant Garamond", "Cormorant", "Georgia", serif;
  --font-sans: "Montserrat", "Helvetica Neue", "Arial", sans-serif;
  --font-script: "Mrs Saint Delafield", "Snell Roundhand", cursive;

  /* fontSize */
  --fs-display: 72px;
  --fs-display-mobile: 42px;
  --fs-h1: 56px;
  --fs-h1-mobile: 38px;
  --fs-h2: 40px;
  --fs-h2-mobile: 30px;
  --fs-h3: 26px;
  --fs-numeral: 44px;
  --fs-script: 64px;
  --fs-script-mobile: 48px;
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 15px;
  --fs-eyebrow: 12px;
  --fs-wordmark: 17px;

  /* lineHeight */
  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.7;
  --lh-lead: 1.6;
  --lh-script: 1;

  /* tracking */
  --tracking-caps: 0.2em;
  --tracking-eyebrow: 0.18em;
  --tracking-none: 0em;

  /* fontWeight */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 144px;
  --gutter: 64px;
  --gutter-tablet: 40px;
  --gutter-mobile: 20px;

  /* radius */
  --radius-0: 0px;
  --radius-disc: 50%;

  /* layout */
  --content-max: 1152px;
  --text-max: 620px;
  --media-max: 460px;
  --header-height: 84px;
  --header-height-mobile: 64px;
  --logo-size: 44px;
  --logo-size-footer: 56px;
  --disc-size: 88px;
  --check-size: 20px;
  --rule-short: 48px;
  --menu-bar-width: 22px;
  --textarea-height: 140px;
  --viewport-desktop: 1280px;
  --viewport-tablet: 820px;
  --viewport-mobile: 390px;
  --col-quarter: 25%;
  --col-third: 33.333%;
  --col-half: 50%;
  --col-full: 100%;
  --col-label: 40%;

  /* border */
  --hairline: 1px;
  --rule-weight: 2px;
  --frame-inset: 12px;

  /* ratio */
  --ratio-portrait: 4 / 5;
  --ratio-square: 1 / 1;
  --ratio-landscape: 3 / 2;
  --ratio-tall: 9 / 16;

  /* shadow */
  --shadow-card: 0 12px 28px rgba(35, 27, 23, 0.08);
}

html, body { margin: 0; background: var(--paper); }