/* Design tokens. Single source for colour, type and spacing. From DESIGN.md and
   src/styles/tokens.css. The logo keeps its own pixels and is exempt from theming. */
:root {
  /* Grounds */
  --ground-porcelain: #F7F5EF;
  --ground-graphite: #101318;
  --ground-sandstone: #ECE6D8;
  --ground-paper: #F2EEE4;
  --surface: #EFECE3;

  /* Ink */
  --ink: #23262B;
  --ink-inverse: #F2EFE7;
  --muted: #5F5E57;        /* ~5.4:1 on porcelain */
  --muted-inverse: #B8B7AE;

  /* Accents */
  --saffron: #B35A24;      /* CTAs, underlines */
  --saffron-bright: #C8671F;
  --banyan: #164D28;
  --chakra-navy: #232E5C;  /* links, focus */

  /* Lines */
  --line: #D7D3C8;
  --line-strong: #C4BEAF;
  --line-dark: #2A2F37;

  /* Type */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Source Serif 4', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Measure and rhythm */
  --max: 1200px;
  --gutter: clamp(20px, 4.5vw, 72px);
  --baseline: 8px;
  --header-h: 68px;

  /* Motion */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);     /* power4.out-ish */
  --ease-move: cubic-bezier(0.87, 0, 0.13, 1);        /* expo.inOut-ish */
  --dur-reveal: 0.85s;
}