/* Generated from tokens/champions.json. Run npm run tokens:build in the guide. */
:root {
  --cs-color-navy: #010D3E;
  --cs-color-page: #F6F5F3;
  --cs-color-panel: #E4E9FB;
  --cs-color-white: #FFFFFF;
  --cs-color-secondary: #6B6D74;
  --cs-color-accent: #FFDC5E;
  --cs-color-border: rgba(0,0,0,0.15);
  --cs-color-hero-start: #A2BCC6D9;
  --cs-color-hero-mid: #B8D0D6BF;
  --cs-color-hero-end: #B8D0D600;
  --cs-control-padding-x: 1.5rem;
  --cs-control-padding-y: .75rem;
  --cs-control-height: 3rem;
  --cs-control-radius: 0;
  --cs-control-focus-width: 2px;
  --cs-control-font-weight: 600;
  --cs-control-text-transform: uppercase;
  --cs-space-xs: .5rem;
  --cs-space-sm: 1rem;
  --cs-space-md: 1.5rem;
  --cs-space-lg: 2rem;
  --cs-space-xl: 3rem;
  --cs-space-heading-gap: 5rem;
  --cs-font-body: "Archivo Condensed", system-ui, sans-serif;
  --cs-font-display: "Winner Sans", Impact, sans-serif;
  --cs-content-max: 80rem;
  --cs-gutter: 1rem;
  --cs-section-gap: 5rem;
  --cs-grid-gap: 1rem;
  --cs-display-size: 3rem;
  --cs-heading-size: 2.25rem;
  --cs-body-size: 1.125rem;
  --cs-body-leading: 1.5rem;
  --cs-small-size: 1rem;
  --cs-card-padding: 1.5rem;
}
@media (min-width: 600px) {
  :root {
  --cs-gutter: 2rem;
  --cs-section-gap: 7.5rem;
  --cs-grid-gap: 1rem;
  --cs-display-size: 4rem;
  --cs-heading-size: 3rem;
  --cs-body-size: 1.25rem;
  --cs-body-leading: 1.625rem;
  --cs-small-size: 1.125rem;
  --cs-card-padding: 2rem;
  }
}
@media (min-width: 1100px) {
  :root {
  --cs-gutter: 5rem;
  --cs-section-gap: 8.75rem;
  --cs-grid-gap: 1.25rem;
  --cs-display-size: 5.5rem;
  --cs-heading-size: 3rem;
  --cs-body-size: 1.25rem;
  --cs-body-leading: 1.625rem;
  --cs-small-size: 1.125rem;
  --cs-card-padding: 2rem;
  }
}