/**
 * Phantom backgrounds and section colours.
 * Ported from src/scss/custom/phantom/_backgrounds.scss.
 */

/* ------------------------ WEBSITE BACKGROUND ------------------------ */

body {
  background-color: var(--pt-color-background-website);
}

/* ------------------------ BACKGROUND COLORS ------------------------ */

.bg-primary-light {
  background-color: var(--pt-theme-color-primary-light);
}

.bg-primary-lighter {
  background-color: var(--pt-theme-color-primary-lighter);
}

.bg-primary-extra-light {
  background-color: var(--pt-theme-color-primary-extra-light);
}

.bg-primary {
  background-color: var(--pt-theme-color-primary-base);
  color: var(--pt-color-text-inverse);
}

.bg-primary * {
  color: var(--pt-color-text-inverse);
}

.bg-primary-dark {
  background-color: var(--pt-theme-color-primary-dark);
  color: var(--pt-color-text-inverse);
}

.bg-primary-dark * {
  color: var(--pt-color-text-inverse);
}

.bg-primary-darker {
  background-color: var(--pt-theme-color-primary-darker);
  color: var(--pt-color-text-inverse);
}

.bg-primary-darker * {
  color: var(--pt-color-text-inverse);
}

.bg-primary-extra-dark {
  background-color: var(--pt-theme-color-primary-extra-dark);
  color: var(--pt-color-text-inverse);
}

.bg-primary-extra-dark * {
  color: var(--pt-color-text-inverse);
}

.bg-secondary-light {
  background-color: var(--pt-theme-color-secondary-light);
}

.bg-secondary-lighter {
  background-color: var(--pt-theme-color-secondary-lighter);
}

.bg-secondary-extra-light {
  background-color: var(--pt-theme-color-secondary-extra-light);
}

.bg-secondary {
  background-color: var(--pt-theme-color-secondary-base);
  color: var(--pt-color-text-inverse);
}

.bg-secondary * {
  color: var(--pt-color-text-inverse);
}

.bg-secondary-dark {
  background-color: var(--pt-theme-color-secondary-dark);
  color: var(--pt-color-text-inverse);
}

.bg-secondary-dark * {
  color: var(--pt-color-text-inverse);
}

.bg-secondary-darker {
  background-color: var(--pt-theme-color-secondary-darker);
  color: var(--pt-color-text-inverse);
}

.bg-secondary-darker * {
  color: var(--pt-color-text-inverse);
}

.bg-secondary-extra-dark {
  background-color: var(--pt-theme-color-secondary-extra-dark);
  color: var(--pt-color-text-inverse);
}

.bg-secondary-extra-dark * {
  color: var(--pt-color-text-inverse);
}

.bg-muted {
  background: var(--pt-color-background-muted);
  color: var(--pt-color-text-muted);
}

.bg-muted * {
  color: var(--pt-color-text-muted);
}

.bg-subtle {
  background-color: var(--pt-color-background-subtle);
}

.bg-banner {
  background-color: var(--pt-color-background-banner);
}

.bg-cta {
  background-color: var(--pt-color-background-cta);
}

.bg-white * {
  color: var(--pt-color-text-base);
}

/* ------------------------ SECTION COLORS ------------------------ */

.section.section-primary {
  background-color: var(--pt-color-background-primary);
}

.section.section-secondary {
  background-color: var(--pt-color-background-secondary);
}

.section.section-neutral {
  background-color: var(--pt-color-background-tertiary);
}

.section.section-muted {
  background-color: var(--pt-color-background-muted);
}