:root {
  --red: #df2438;
  --red-dark: #b81d2e;
  --ink: #202124;
  --muted: #626773;
  --line: #e4e6eb;
  --soft: #f6f7f9;
  --surface: #fff;
  --success: #12754e;
  --warning: #885900;
  --danger: #ba2436;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius: 8px;
  --shadow: 0 4px 20px rgb(24 28 38 / 7%);
  --page-gutter: 16px;
  --content-width: 1320px;
  --header-height: 112px;
  --bottom-height: 68px;
  --sidebar-width: 216px;
}
@media (min-width: 768px) { :root { --page-gutter: 24px; } }
@media (min-width: 1024px) { :root { --header-height: 124px; --bottom-height: 0px; } }
@media (min-width: 1280px) { :root { --page-gutter: 32px; } }