/* Shared design tokens. Keep spacing hierarchy independent of individual projects. */
:root {
  --color-paper: #ffffff;
  --color-ink: #101010;
  --color-muted: #737373;
  --color-line: #d8d8dc;
  --color-stage: #f5f5f7;
  --color-inset: #f5f5f7;
  --color-blue: #2400ff;
  --color-lime: #c8ff00;
  --page-width: 100%;
  --page-margin: clamp(16px, calc(15vw - 90px), 128px);
  --column-gap: 32px;
  --card-radius: 6px;
  --section-gap: 88px;
  --detail-image-copy: 16px;
  --detail-inner-gap: 150pt;
  --detail-tools-gap: 192px;
  --detail-navigation-gap: 26px;
  --detail-project-gap: 192px;
  --ease-smooth: cubic-bezier(.2, .75, .2, 1);
  --font-body: Arial, Helvetica, sans-serif;
}
@media (max-width: 700px) {
  :root { --column-gap: 24px; --card-radius: 6px; --section-gap: 56px; --detail-inner-gap: 75px; --detail-tools-gap: 96px; --detail-project-gap: 96px; }
}

/* Increase desktop breathing room while joining the tablet inset smoothly. */
@media(min-width:1025px) { :root { --page-margin:clamp(64px,calc(21.25vw - 153.6px),152px); } }