:root{
  --hairline:1px;
  --border-hairline:var(--hairline) solid var(--rule-hairline);
  --border-medium:var(--hairline) solid var(--rule-medium);
  --border-strong:var(--hairline) solid var(--rule-strong);

  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-pill:999px;

  /* elevation is used sparingly — only for lifted mockups and overlays */
  --shadow-none:none;
  --shadow-raise:0 1px 2px rgba(23,21,18,0.05);
  --shadow-mockup:0 32px 64px -32px rgba(23,21,18,0.22),0 2px 8px rgba(23,21,18,0.05);
  --shadow-overlay:0 40px 96px -32px rgba(23,21,18,0.34);
  --inset-hairline:inset 0 0 0 1px var(--rule-hairline);
}