:root {
  --radius-1: 3px;
  --radius-2: 6px;
  --radius-3: 10px;
  --radius-4: 16px;
  --radius-5: 24px;
  --radius-pill: 999px;

  --hairline-width: 1px;
  --border-line: var(--hairline-width) solid var(--border-hairline);
  --rule-strong: 1px solid var(--border-strong);

  /* Three warm, low-contrast levels. Depth normally comes from layered
     neutrals + hairlines; reach for these only when an element must lift. */
  --shadow-1: 0 1px 2px rgba(60, 48, 28, 0.06);
  --shadow-2: 0 2px 8px rgba(60, 48, 28, 0.07);
  --shadow-3: 0 6px 24px rgba(60, 48, 28, 0.08);
}