/* tokens.css */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* Typography scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;
  --text-hero: clamp(3rem, 7vw, 6rem);

  /* Line heights */
  --lh-heading: 1.1;
  --lh-body: 1.6;
  --lh-caption: 1.4;

  /* Letter spacing */
  --ls-h1: -0.02em;
  --ls-h2: -0.01em;
  --ls-label: 0.04em;

  /* Light mode colours (default) */
  --bg: #F4F0E9;
  --bg-surface: #EAE6DE;
  --bg-raised: #EDE6DC;
  --text: #1E1E1E;
  --text-muted: #6B6860;
  --accent: #6D7F48;
  --accent-hover: #5A6B3A;
  --stroke: #1E1E1E;
  --stroke-subtle: rgba(30, 30, 30, 0.15);
  --focus: #6D7F48;

  /* Spacing */
  --label-mb: 5px; /* gap between an all-caps label and the heading below it */

  /* Transitions */
  --transition-color: 300ms ease;
  --transition-fast: 150ms ease;
}


/* Font families */
.font-serif {
  font-family: 'Instrument Serif', Georgia, serif;
}

.font-sans {
  font-family: 'Instrument Sans', system-ui, sans-serif;
}

/* Base typography */
body {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--bg);
  transition: background-color var(--transition-color), color var(--transition-color);
}

h1, h2, h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  line-height: var(--lh-heading);
}

h1 {
  font-size: var(--text-hero);
  letter-spacing: var(--ls-h1);
}

h2 {
  font-size: var(--text-3xl);
  line-height: 1.3;
  letter-spacing: var(--ls-h2);
}

h3 {
  font-size: var(--text-xl);
}

h4, h5, h6 {
  font-family: 'Instrument Sans', system-ui, sans-serif;
}