<main data-theme>
  <header>
    <h1>Scope Demo 4: Ownership</h1>

    <button>light-mode button</button>
  </header>
  <section data-theme="invert">
    <h2>donut "Dark Mode"</h2>
    <button>dark-mode button</button>

    <section data-theme>
      <h3>Nested Default Theme</h3>
      <button>dark-mode button</button>
    </section>
  </section>
</main>

html {
  --background--global: white;
  --color--global: black;
  --btn-color--global: rebeccapurple;
  --btn-contrast--global: white;
}

[data-theme] {
  --background--component: initial;
  --color--component: initial;
  --btn-color: initial;
  --btn-contrast: initial;
  background: var(--background--component, var(--background--global));
  color: var(--color--component, var(--color--global));  
}

[data-theme='invert'] {
  --background--component: var(--color--global);
  --color--component: var(--background--global);
  --btn-color: plum;
  --btn-contrast: var(--color--global);
}

button {
  background: var(--btn-color, var(--btn-color--global));
  color: var(--btn-contrast, var(--btn-contrast--global));
}

/* layout */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: avenir, roboto, helvetica, sans-serif;
}

main {
  font-size: calc(1em + 0.5vw);
  display: grid;
  min-height: 100vh;
  place-content: safe center;
  padding: 1em;
}

header,
section {
  padding: 1em;
}

section section {
  margin-top: 1em;
}

h1, h2, h3 {
  margin-top: 0;
}

button {
  border: none;
  border-radius: 0.25em;
  padding: 0.25em 1.5em;
  font: inherit;
  cursor: pointer;
}