/* Shared colour, typography and spacing tokens. */
:root {
  --accent: var(--ink);
  --accent-hover: #343936;
  --accent-dark: var(--accent-hover);
  --ink: #191c1b;
  --text-primary: var(--ink);
  --button-text: var(--white);
  --white: #ffffff;
  --light: var(--blue);
  --mid: #e0e0e0;
  --muted: var(--blue);
  --blue: #2c4257;
  --alfred: #809385;
  --marvin: #2c4257;
  --hedy: #f5f4f1;
  --sans: "Inter", sans-serif;
  --serif: "Source Serif 4", serif;
  --body: 15px;
  --sm: 14px;
  --h1: 48px;
  --h2: 24px;
  --h3: 21px;
  --product-title: 32px;
  --control-size: 16px;
  --soft-grey: #f5f4f1;
  --image-radius: 14px;
  --image-shadow: 0 12px 36px rgba(25, 28, 27, 0.24);

  --panel-radius: 36px;
  --section-space: 80px;
  --layout-gap: 48px;
  --grid-gap: 24px;
  --card-padding: 32px;
  --card-gap: 12px;
  --card-radius: 0px;
  --intro-width: 760px;
}