/**
 * @file tagline-bold.css
 * SDC Tagline bold component styles.
 * Uses design tokens from theme.css.
 */

.tagline-bold {
  max-width: 35rem; /* 560px – no token in theme; add --max-width-medium if needed */
  align-self: stretch;
  color: var(--card-foreground);
  text-align: center;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: var(--font-weight-bold);
}

/* Original behavior: large desktop, compact mobile */
.tagline-bold--size-default {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}

@media (max-width: 767px) {
  .tagline-bold--size-default {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }
}

/* Fixed scale at all breakpoints */
.tagline-bold--size-xs {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.tagline-bold--size-sm {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.tagline-bold--size-base {
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
}

.tagline-bold--size-lg {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}

.tagline-bold--size-xl {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

.tagline-bold--size-2xl {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
}

.tagline-bold--size-3xl {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl--line-height);
}

.tagline-bold--size-4xl {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
}