/* Design tokens — change colours, fonts and spacing here and the whole site follows. */
:root {
  /* Colour */
  --color-bg: #F5F3EF;
  --color-bg-alt: #EAE6DF;
  --color-ink: #141414;
  --color-muted: #5E5A55;
  --color-line: #D9D4CC;
  --color-line-strong: #BDB6AB;
  --color-dark: #141414;
  --color-on-dark: #F5F3EF;
  --color-on-dark-soft: #C9C3BA;
  --color-on-dark-faint: #A8A29A;
  --color-dark-line: #3A3835;

  /* Type */
  --font-display: 'Bodoni Moda', Georgia, serif;
  --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 18px;
  --text-stat: 28px;
  --text-h2: clamp(40px, 5vw, 56px);
  --text-h1: clamp(56px, 8vw, 112px);
  --text-xl: clamp(44px, 6vw, 72px);
  --tracking-wide: 0.2em;
  --tracking-wider: 0.3em;

  /* Spacing & layout */
  --container: 1440px;
  --gutter: 5%;
  --section-y: clamp(72px, 9vw, 112px);
  --gap: 16px;
  --header-h: 81px; /* sticky header height, used to fit the hero in one screen */

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
}