:root {
  --layout-shell: 1340px;
  --layout-container: 1120px;
  --page-gutter: 48px;
  --page-gutter-mobile: 32px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 56px;
  --space-12: 64px;
  --space-13: 72px;

  --section-y: 96px;
  --section-y-tight: 72px;
  --hero-y: 48px;
  --heading-gap: 56px;

  --gap-xs: var(--space-2);
  --gap-sm: var(--space-3);
  --gap-md: var(--space-4);
  --gap-lg: var(--space-6);
  --gap-xl: var(--space-8);
  --gap-2xl: var(--space-10);

  --pad-xs: var(--space-2);
  --pad-sm: var(--space-3);
  --pad-md: var(--space-4);
  --pad-lg: var(--space-5);
  --pad-xl: var(--space-6);
  --pad-2xl: var(--space-8);

  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 999px;

  --border-width: 1px;
  --surface-border: var(--border-width) solid var(--border-soft);
  --brand-border: var(--border-width) solid var(--border);

  --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.3);
  --shadow-surface: 0 18px 52px rgba(0, 0, 0, 0.42);
  --shadow-strong: 0 22px 64px rgba(0, 0, 0, 0.52);

  --control-height: 48px;
  --button-height: 50px;
  --icon-box: 52px;

  --container: var(--layout-container);
  --radius: var(--radius-md);
  --shadow: var(--shadow-surface);
}