:root {
  /* Colors */
  --color-bg: #080808;
  --color-bg-elevated: #0f0f0f;
  --color-surface: #161616;
  --color-border: #1e1e1e;
  /* Primary text — used by `body` and inherited by titles, hero name,
     UI labels, etc. Slightly warm near-white that pairs with the warm
     pink-gray secondary palette without being so bright it stings on
     the dark bg. */
  --color-text: #ece8e0;
  /* Long-form reading text — only used by post bodies (blog post page
     + homepage super-featured). Cornsilk cream is easier on the eyes
     for paragraphs at length; UI/titles use --color-text instead. */
  --color-body-text: #FFF8DC;
  --color-text-secondary: #c4b0b0;
  --color-text-muted: #888888;
  --color-text-label: #a89090;
  /* Dates and short timestamps everywhere — uppercase mono labels next
     to posts, thoughts, shoutbox messages, etc. Soft red accent that
     leans into the site palette without shouting. */
  --color-date: #a85050;
  --color-red: #8b0000;
  --color-red-bright: #b30000;
  --color-red-glow: rgba(139, 0, 0, 0.25);
  --color-red-subtle: rgba(139, 0, 0, 0.08);

  /* Fonts */
  --font-display: 'Gloria Hallelujah', cursive;   /* hero name + nudge post-it text only */
  --font-title: 'Source Serif 4', Georgia, serif; /* section, card, about, blog post titles */
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --dock-width: 48px;
}