:root {
  /* Typography roles */
  --font-size-display: clamp(36px, 6vw, 92px);
  --font-size-supporting: clamp(18px, 2.4vw, 36px);
  --font-size-caption: clamp(14px, 1.35vw, 20px);
  --font-weight-site: 500;
  --tracking-display: -0.055em;
  --leading-display: 0.9;
  --leading-supporting: 1;

  /* Layout and interaction roles */
  --space-page: clamp(20px, 2.5vw, 40px);
  --space-page-compact: 16px;
  --space-section-inset: clamp(32px, 5vw, 48px);
  --space-row: 20px;
  --space-row-compact: 18px;
  --space-row-stacked: clamp(28px, 4vw, 40px);
  --space-row-gap: 24px;
  --space-icon-label: 0.18em;
  --space-leading-icon: 0.26em;
  --space-stack-tight: 8px;
  --space-stack: 12px;
  --control-height: clamp(100px, 10vw, 152px);
  --control-height-compact: 92px;
  --rule-thin: 2px;
  --rule-section: 12px;
  --focus-ring: 4px;
  --motion-fast: 120ms;
  --motion-shift: 20px;

  font-family: "Roboto Flex", Arial, Helvetica, sans-serif;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14, "wght" 500;
  font-weight: var(--font-weight-site);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--color-surface-canvas);
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--color-text-primary);
}

a {
  color: inherit;
}

:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-ring);
}

h1,
h2 {
  font-weight: var(--font-weight-site);
}

@media (max-width: 700px) {
  :root {
    --font-size-display: clamp(32px, 10vw, 52px);
    --font-size-supporting: clamp(18px, 5vw, 26px);
    --motion-shift: 12px;
  }
}