/* ========================================================= */
/* Base                                                       */
/* ========================================================= */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-font-dark);
  background: var(--color-background-purple);
  margin: 0;
  padding: var(--spacing-small);
}

@media (max-width: 48rem) {
  :root {
    --layout-tab-navigation-large-padding-inline: 0.7rem;
  }

  body {
    padding: var(--spacing-small);
  }
}

section {
  margin-bottom: var(--spacing-large);
}

section + section {
  margin-top: var(--spacing-large);
}

.sg-main-heading {
  margin: 0 0 var(--spacing-large) 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-brand);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  color: var(--color-font-light);
}

.sg-sub-heading {
  margin: 0 0 var(--spacing-large) 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
}

.sg-text-on-dark {
  color: var(--color-font-light);
}

.sg-brand-title {
  margin: 0 0 var(--spacing-large) 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-brand);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

.sg-heading-h1 {
  margin: 0 0 calc(var(--spacing-large) - 0.5rem) 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

.sg-heading-h2 {
  margin: 0 0 var(--spacing-large) 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

.sg-preview-label {
  margin: 0 0 var(--spacing-small) 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  color: var(--color-font-light);
}

.sg-preview-area {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--spacing-small);
  align-items: var(--layout-preview-align-items);
  padding: 0;
  border-radius: 0;
  background: transparent;
}