/* Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: Graphite
 * Audience: designers and project contributors · use: inspect font matches
 * Nav: N9 · footer: Ft2 · enrichment: actual specimens · motion: press
 * Neutral chrome and open columns leave the actual specimens prominent.
 */
/* Inter and Source Serif 4 load from Google Fonts (linked in each page's head); no font files are shipped. */
:root {
  --color-paper: oklch(98.2% 0 0);
  --color-surface: oklch(100% 0 0);
  --color-well: oklch(95.5% 0 0);
  --color-rule: oklch(86% 0 0);
  --color-muted: oklch(47% 0 0);
  --color-ink: oklch(23% 0 0);
  --color-accent: var(--color-ink);
  --color-accent-ink: var(--color-surface);
  --color-tint: oklch(92% 0 0);
  --color-focus: var(--color-ink);
  --color-error: oklch(44% .14 30);
  --color-mask: oklch(20% 0 0 / .26);
  --color-transparent: transparent;
  --color-shadow: oklch(20% 0 0 / .12);
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Source Serif 4', ui-serif, Georgia, serif;
  --font-specimen: var(--font-display);
  --text-small: .8125rem;
  --text-body: 1rem;
  --text-title: .875rem;
  --text-preview: clamp(1.875rem, 3vw, 2.625rem);
  --text-hero: clamp(2.5rem, 5vw, 4.5rem);
  --text-lead: clamp(1.125rem, 2vw, 1.375rem);
  --text-section: clamp(1.75rem, 3vw, 2.25rem);
  --radius-control: 0;
  --radius-panel: 2px;
  --radius-popover: 6px;
  --radius-pill: 999px;

  --shadow-popover: 0 10px 32px var(--color-shadow);

  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --text-code: .75rem;
  --text-subtitle: 1.125rem;
  --text-wordmark: 2.125rem;
  --text-glyph: 1.375rem;
  --text-glyph-small: 1.125rem;
  --text-glyph-large: 1.75rem;
  --measure: 62ch;

  /* Links underline in the rule colour and darken to the text colour on hover. */
  --link-rule: var(--color-rule);
  --link-offset: 4px;

  /* A 4px grid; targets are at least 44px. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --size-target: 44px;
}