/*
  Section colours (MB-1, from Boyd's section themes T02/T11): one class per key of the "Section colour" preset list.
  A block writes class="@Html.BandClass(...)" (Code/Theme/SectionTheme.cs), which gives "band section-colour band--<key>" and declares
  this file once for the page. Each class redefines the role tokens for its ground, so headings, text, links, eyebrows,
  pill buttons and the focus ring follow. Colours come only from the --theme-<key>-* tokens in css/tokens.css; a site
  changes them there. Custom properties inherit their computed value, so every token a part reads is set again here.
  Scoped (MB-24): every rule needs master's own "section-colour" class, so a site's own element called "band" or
  "band--dark" is never restyled. :where() keeps each rule's specificity as it was, so master's sections look the same.
*/

.section-colour {
  background: var(--band-bg);
  color: var(--color-text);
  /* Padding is the block's own (Boyd lesson): blocks use --section-space and --page-gutter in their CSS. */
}
.section-colour :where(h1, h2, h3, h4) { color: var(--color-heading); }
.section-colour a:not(.btn) { color: var(--color-link); }
.section-colour a:not(.btn):hover { color: var(--color-link-hover); }

/* Every band sets the roles from its --theme-<key>-* tokens. */
:where(.section-colour).band--plain, :where(.section-colour).band--light, :where(.section-colour).band--muted, :where(.section-colour).band--dark, :where(.section-colour).band--deep, :where(.section-colour).band--accent {
  --color-text: var(--band-text);
  --color-heading: var(--band-heading);
  --color-link: var(--band-link);
  --color-link-hover: var(--band-link);
  --color-focus: var(--band-focus);
  --color-eyebrow: var(--band-eyebrow);
  --eyebrow-color: var(--band-eyebrow);
  --btn-2-fg: var(--band-heading);
  --btn-2-border: var(--band-heading);
  --btn-2-hover-bg: var(--band-heading);
  --btn-2-hover-fg: var(--band-bg);
}

:where(.section-colour).band--plain {
  --band-bg: var(--theme-plain-bg);
  --band-text: var(--theme-plain-text);
  --band-heading: var(--theme-plain-heading);
  --band-link: var(--theme-plain-link);
  --band-focus: var(--theme-plain-focus);
  --band-eyebrow: var(--theme-plain-eyebrow);
}
:where(.section-colour).band--light {
  --band-bg: var(--theme-light-bg);
  --band-text: var(--theme-light-text);
  --band-heading: var(--theme-light-heading);
  --band-link: var(--theme-light-link);
  --band-focus: var(--theme-light-focus);
  --band-eyebrow: var(--theme-light-eyebrow);
}
:where(.section-colour).band--muted {
  --band-bg: var(--theme-muted-bg);
  --band-text: var(--theme-muted-text);
  --band-heading: var(--theme-muted-heading);
  --band-link: var(--theme-muted-link);
  --band-focus: var(--theme-muted-focus);
  --band-eyebrow: var(--theme-muted-eyebrow);
}
:where(.section-colour).band--dark {
  --band-bg: var(--theme-dark-bg);
  --band-text: var(--theme-dark-text);
  --band-heading: var(--theme-dark-heading);
  --band-link: var(--theme-dark-link);
  --band-focus: var(--theme-dark-focus);
  --band-eyebrow: var(--theme-dark-eyebrow);
}
:where(.section-colour).band--deep {
  --band-bg: var(--theme-deep-bg);
  --band-text: var(--theme-deep-text);
  --band-heading: var(--theme-deep-heading);
  --band-link: var(--theme-deep-link);
  --band-focus: var(--theme-deep-focus);
  --band-eyebrow: var(--theme-deep-eyebrow);
}
:where(.section-colour).band--accent {
  --band-bg: var(--theme-accent-bg);
  --band-text: var(--theme-accent-text);
  --band-heading: var(--theme-accent-heading);
  --band-link: var(--theme-accent-link);
  --band-focus: var(--theme-accent-focus);
  --band-eyebrow: var(--theme-accent-eyebrow);
  --btn-1-bg: var(--theme-accent-btn-1-bg);
  --btn-1-fg: var(--theme-accent-btn-1-fg);
  --btn-1-border: var(--theme-accent-btn-1-bg);
  --btn-1-hover-bg: var(--theme-accent-btn-1-hover-bg);
  --btn-1-hover-fg: var(--theme-accent-btn-1-hover-fg);
}

/* Dark grounds: the primary pill turns light. */
:where(.section-colour).band--dark, :where(.section-colour).band--deep {
  --btn-1-bg: var(--theme-inverse-btn-1-bg);
  --btn-1-fg: var(--theme-inverse-btn-1-fg);
  --btn-1-border: var(--theme-inverse-btn-1-bg);
  --btn-1-hover-bg: var(--theme-inverse-btn-1-hover-bg);
  --btn-1-hover-fg: var(--theme-inverse-btn-1-hover-fg);
}