/* ==========================================================================
   Theme scope — apply palette to a section/block, not the whole page
   <section class="theme-scope" data-theme="forest" data-accent="ember">
   ========================================================================== */

.theme-scope {
  background-color: var(--bg);
  color: var(--ink-3);
  /* contain inheritance for children; allow nested scopes */
  color-scheme: inherit;
}

.theme-scope,
.theme-scope .text-ink { color: var(--ink); }

.theme-scope .text-ink-2 { color: var(--ink-2) !important; }
.theme-scope .text-ink-3 { color: var(--ink-3) !important; }
.theme-scope .text-muted-2 { color: var(--muted) !important; }
.theme-scope .text-brand,
.theme-scope .text-brand-600,
.theme-scope .text-accent { color: var(--brand-600) !important; }
.theme-scope .text-brand-300,
.theme-scope .text-accent-soft { color: var(--brand-300) !important; }
.theme-scope .text-brand-700,
.theme-scope .text-accent-strong { color: var(--brand-700) !important; }
.theme-scope .text-brand-50 { color: var(--brand-50) !important; }
.theme-scope .text-brand-100 { color: var(--brand-100) !important; }
.theme-scope .text-brand-500 { color: var(--brand-500) !important; }
.theme-scope .text-on-inverse { color: var(--on-inverse) !important; }
.theme-scope .text-on-inverse-muted { color: var(--on-inverse-muted) !important; }

/* Headings/body inherit scope ink (Bootstrap/utilities may fight otherwise) */
.theme-scope h1,
.theme-scope h2,
.theme-scope h3,
.theme-scope h4,
.theme-scope h5,
.theme-scope h6,
.theme-scope .display-4,
.theme-scope .display-5,
.theme-scope .display-6 {
  color: var(--ink);
}

/* Section glow from dark themes: local, not fixed-to-viewport */
.theme-scope[data-theme] {
  background-attachment: scroll !important;
  background-repeat: no-repeat;
  background-size: 100% 70%;
  background-position: top center;
}

/* Nested inverse bands still use tokens from this scope */
.theme-scope .bg-inverse,
.theme-scope.bg-inverse {
  background-color: var(--inverse) !important;
}

.theme-scope .bg-surface { background-color: var(--surface) !important; }
.theme-scope .bg-surface-2 { background-color: var(--surface-2) !important; }
.theme-scope .bg-surface-3 { background-color: var(--surface-3) !important; }
.theme-scope .bg-brand { background-color: var(--brand-600) !important; }
.theme-scope .bg-brand-700 { background-color: var(--brand-700) !important; }

/* Demo label chip for scoped gallery */
.theme-scope-label {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.theme-scope-label code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.45rem;
  color: var(--ink);
}