:root {
  /* Mobile-first defaults */
  --gutter-padding: 1.75rem;
  --space-container: 1rem; /* body padding */
  --space-block: 2rem;     /* padding for body direct children */

  /* Typography */
  --font-size-root: 100%;          /* equals browser default */
  --font-size-body: 1rem;          /* base text size */
  --font-size-h1: clamp(1.75rem, 1.25rem + 2vw, 2.25rem);
  --font-size-h2: clamp(1.375rem, 1rem + 1vw, 1.75rem);
  --font-size-h3: clamp(1.125rem, 0.9rem + 0.5vw, 1.375rem);
  --font-size-h4: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);

  /* Header and panels */
  --header-height: 3.5rem;  /* fixed header height */
  --aside-width: 85vw;      /* off-canvas panel width on mobile (leave some screen visible) */

  --surface: #f2f2f2;
  --highest-surface: #ddd;
}

/* Scale up spacing on larger screens */
@media (min-width: 768px) {
  :root {
    --space-container: 2rem;
    --space-block: 4rem;

    /* Optionally bump body size slightly on larger screens */
    --font-size-body: 1.0625rem; /* ~17px */

    /* Larger UI scales */
    --header-height: 4.5rem;
    --aside-width: 22rem;
  }
}