:root {
  --am-midnight: #07111f;
  --am-panel: #0d1b2f;
  --am-cloud: #f7fafc;
  --am-blue: #2563eb;
  --am-cyan: #67e8f9;
  --am-slate: #9fb0c8;
  --am-light-slate: #59677a;
  --am-border-dark: rgba(103, 232, 249, 0.18);
  --am-border-light: rgba(7, 17, 31, 0.14);

  --am-font-sans: Inter, Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --am-font-mono: "IBM Plex Mono", "Geist Mono", "SFMono-Regular", ui-monospace, monospace;

  --am-radius-sm: 10px;
  --am-radius-md: 16px;
  --am-radius-lg: 24px;
  --am-radius-pill: 999px;
}

.am-heading-xl {
  font-family: var(--am-font-sans);
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.078em;
  font-weight: 820;
}

.am-body-lg {
  font-family: var(--am-font-sans);
  font-size: 18px;
  line-height: 1.55;
}

.am-label {
  font-family: var(--am-font-sans);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.am-metric {
  font-family: var(--am-font-mono);
  font-variant-numeric: tabular-nums;
}

.am-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--am-radius-pill);
  background: var(--am-blue);
  color: #ffffff;
  font-family: var(--am-font-sans);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.am-button-secondary-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--am-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--am-cloud);
  font-family: var(--am-font-sans);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.am-panel-dark {
  border: 1px solid var(--am-border-dark);
  border-radius: var(--am-radius-lg);
  background: var(--am-panel);
}
