html {
  box-sizing: border-box;
  color: var(--color-brand-black);
  font-family: var(--font-family-base);
  font-size: 100%;
  letter-spacing: var(--letter-spacing-base);
}

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

body {
  background: var(--color-brand-white);
  color: var(--color-brand-black);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-body-line-height);
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
}

img,
svg,
video {
  display: block;
  height: auto;
  max-width: 100%;
}

a {
  color: inherit;
  font-size: var(--type-link-size);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

button,
input,
select,
textarea {
  font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
  max-inline-size: 100%;
}

h1,
h2,
h3 {
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-base);
  margin-block: 0 var(--space-24);
}

h1 {
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line-height);
}

h2 {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line-height);
}

h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
}

p {
  margin-block: 0 var(--space-16);
}

.visually-hidden {
  block-size: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* Universal button interaction. Every `.cyclein-button` transitions smoothly and
   gets a consistent hover feedback (a slight darken) so buttons without a
   variant-specific hover still respond; variant hovers layer on top. */
.cyclein-button {
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    filter 150ms ease;
}

.cyclein-button:hover {
  filter: brightness(0.94);
}

.bg-info {
  background-color: lightgrey;
}