/* Journal design tokens. Every visual value in the layer comes from these.
   An app overrides any of them in its own CSS, e.g. on :root:root. */
:root {
  /* Colour */
  --journal-color-text: #1f2328; /* body text */
  --journal-color-muted: #59636e; /* dates, meta, captions */
  --journal-color-bg: #ffffff; /* page background */
  --journal-color-surface: #f6f8fa; /* cards, quotes, code blocks */
  --journal-color-border: #d1d9e0; /* card and table borders, rules */
  --journal-color-link: #0969da; /* links */
  --journal-color-link-hover: #0550ae; /* hovered links */
  --journal-color-accent: #0969da; /* current page, focus ring */
  --journal-color-on-accent: #ffffff; /* text on the accent colour */

  /* Type */
  --journal-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* body copy */
  --journal-font-heading: var(--journal-font-body); /* headings */
  --journal-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* code */
  --journal-font-size-base: 1.0625rem; /* body size */
  --journal-line-height: 1.7; /* body leading */

  /* Spacing scale */
  --journal-space-1: 0.25rem; /* hairline gaps */
  --journal-space-2: 0.5rem; /* inline gaps */
  --journal-space-3: 1rem; /* paragraph gap */
  --journal-space-4: 1.5rem; /* card padding */
  --journal-space-5: 2.5rem; /* section gap */
  --journal-space-6: 4rem; /* page padding */

  /* Radii */
  --journal-radius-sm: 4px; /* code, tags */
  --journal-radius-md: 8px; /* cards, images */
  --journal-radius-lg: 16px; /* featured image */

  /* Layout */
  --journal-content-width: 46rem; /* reading column */
  --journal-wide-width: 72rem; /* listings */
  --journal-card-min: 16rem; /* narrowest card in a grid */
  --journal-image-ratio: 1200 / 630; /* featured image crop */
}