<header>
  <input type="checkbox" id="dark-mode" />
  <label for="dark-mode">Dark Mode</label>
</header>
<main>
  <h1>Two-Color Focus Indicator Demo</h1>
  <button type="button">Test Button</button>
  <p>
    This is some text with
    <a href="#">a link to nowhere</a>.
    So cool!
  </p>
</main>

:root {
  --bg-color: #fafafa;
  --text-color: #000;
  --primary-color: #003366;
  --primary-btn-text-color: #fff;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
  margin: 1rem;
  
  &:has([type="checkbox"]:checked) {
    --bg-color: #212121;
    --text-color: #fff;
    --primary-color: #00C8FF;
    --primary-btn-text-color: #212121;
  }
}

button {
  background: var(--primary-color);
  border: none;
  border-radius: 0.25rem;
  color: var(--primary-btn-text-color);
  font-size: 1.1rem;
  padding: 0.75rem 1rem;
  transition: opacity 0.2s, scale 0.2s;
  
  &:active {
    opacity: 0.9;
    transform: scale(0.98); /* Slightly smaller */
  }
  
  @media (forced-colors: active) {
    border: 1px solid transparent;
  }
}

a[href] {
  color: var(--primary-color);
}

:is(a[href], button):focus:not(:focus-visible) {
  outline: none;
}

:is(a[href], button):focus-visible {
  /* inner indicator */
	outline: 3px #fff solid;
	outline-offset: 0;
	/* outer indicator */
	box-shadow: 0 0 0 5px #000;
}