/* ==========================================================================
   Layout, radii, borders & elevation
   ========================================================================== */

:root {
  /* --- Layout ------------------------------------------------------------- */
  --measure:         65ch;    /* @kind spacing */ /* optimal body line length (~60–70 chars) */
  --container:       72rem;   /* @kind spacing */ /* 1152px — outer max width */
  --container-prose: 44rem;   /* @kind spacing */ /* narrower column for essay/article pages */
  --gutter:          1.5rem;  /* @kind spacing */ /* page side padding (mobile)   */
  --gutter-lg:       2.5rem;  /* @kind spacing */ /* page side padding (≥ tablet) */
  --grid-cols:       12;      /* @kind other */
  --grid-gap:        1.5rem;  /* @kind spacing */

  /* --- Radii / borders ---------------------------------------------------- */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 14px;
  --border-hairline: 1px solid var(--color-border);

  /* --- Elevation — warm-tinted, used sparingly ---------------------------- */
  --shadow-card:  0 1px 2px rgba(34, 28, 24, 0.04);
  --shadow-lift:  0 8px 22px -8px color-mix(in srgb, var(--color-accent) 70%, transparent);

  /* --- Z-index ------------------------------------------------------------ */
  --z-nav: 100;  /* @kind other */
}

/* Breakpoints (reference — used in media queries, not as custom props):
   sm 480px · md 768px · lg 1024px · xl 1280px */