@import url('tokens.css');

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

img { max-width: 100%; height: auto; }

.site-brand__text span { color: var(--color-metro-orange, var(--color-brand-primary)); }

.site-brand__logo--auth {
  height: 2.5rem;
  width: auto;
  max-width: 200px;
  margin: 0 auto;
  display: block;
}

.site-brand__text--auth {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-brand-secondary);
}

.site-brand__text--auth span { color: var(--color-metro-orange, var(--color-brand-primary)); }

a { color: var(--color-brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}