/* Content widths, gutters, radii and breakpoints. Radius baseline is 6px. */

:root {
  --content-max-width-hero: 1400px;
  --content-max-width: 1200px;
  --content-max-width-compact: 960px;
  --content-max-width-prose: 720px;
  --content-padding: 24px;

  --nav-height: 56px;
  --nav-blur: 10px; /* @kind other */

  --radius-xs: 4px;
  --radius-sm: 6px;   /* baseline for buttons, inputs, small UI */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-thick: 2px;
  --rule-height: 3px;  /* gradient rule / brand bar */

  --tap-target-min: 44px;

  /* Breakpoint values, exposed for documentation and JS. */
  --bp-lg: 1024px; /* @kind other */
  --bp-md: 768px; /* @kind other */
  --bp-sm: 480px; /* @kind other */
}

@media (max-width: 767px) {
  :root { --content-padding: 16px; }
}