/* Tokens — brand palette, radii, shadow. The single source for every value. */
:root {
  --cream: #f5f4ec;
  --cream-warm: #fdf0e3;
  --content: #ffffff;
  --surface: #ffffff;
  --ink: #16130e;
  --ink-inverse: #f5f4ec;
  --orange: #d5522b;
  --orange-deep: #b8431f;
  --orange-tint: #fbe9e0;
  --blue: #8cadc6;
  --blue-tint: #e6eef4;
  --blue-deep: #3c657f;
  --live: #178f57;
  --warn-tint: #fdf3d7;
  --warn-deep: #8a6d1a;
  --live-tint: #e3f3ea;
  --text-muted: #6e6759;
  --border: rgba(22,19,14,0.12);
  --ink-soft: rgba(22,19,14,0.05);
  --ink-veil: rgba(22,19,14,0.22);
  --ink-shadow-strong: rgba(22,19,14,0.24);
  --inverse-muted: rgba(245,244,236,0.75);
  --shadow-card: 0 2px 8px rgba(22,19,14,0.06);
  --r-card: 26px;
  --r-media: 18px;
  --r-input: 14px;
  --r-pill: 999px;
  /* page grid — one content column + gutter for every top-level container */
  --maxw: 1140px;
  --gutter: 24px;
  /* section rhythm — shared by every content section + its header */
  --section-gap: 72px;
  --head-gap: 24px;
}