/* V58 · explicit theme contract
   The default edition is the warm-paper light theme shown in product review.
   Dark mode is an explicit, persisted user choice—not an ambient OS surprise. */

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"]:has(.home-screen) {
  background: #f3efe6;
}

html[data-theme="dark"]:has(.home-screen) {
  background: #211c19;
}

html[data-theme="light"] body:has(.home-screen) {
  background: #f3efe6;
}

html[data-theme="dark"] body:has(.home-screen) {
  background: #211c19;
}

.theme-toggle {
  position: relative;
  display: inline-grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  padding: 0;
  place-items: center;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 42%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 160ms var(--ease),
    border-color 160ms var(--ease),
    background-color 160ms var(--ease),
    transform 120ms var(--ease);
}

.theme-toggle .icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.7;
}

.theme-toggle:active {
  transform: scale(0.94);
}

.theme-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 30%, transparent);
  outline-offset: 3px;
}

html[data-theme="dark"] .theme-toggle {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.home-screen .theme-toggle {
  color: var(--home-ink-2);
  border-color: var(--home-line);
  background: color-mix(in srgb, var(--home-surface) 48%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%);
}

html[data-theme="light"] .home-screen .site-header {
  background: color-mix(in srgb, #f3efe6 96%, transparent);
}

html[data-theme="dark"] .home-screen .site-header {
  background: color-mix(in srgb, #211c19 96%, transparent);
}

.home-screen .theme-toggle:focus-visible {
  outline-color: color-mix(in srgb, var(--home-brand) 34%, transparent);
}

.notes-screen .theme-toggle {
  color: var(--notes-muted);
  border-color: var(--notes-line);
  background: color-mix(in srgb, var(--notes-card) 62%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--surface-hover);
  }

  .home-screen .theme-toggle:hover {
    color: var(--home-brand);
    border-color: color-mix(in srgb, var(--home-brand) 36%, var(--home-line));
    background: var(--home-surface);
  }

  .notes-screen .theme-toggle:hover {
    color: var(--notes-purple);
    border-color: color-mix(in srgb, var(--notes-purple) 34%, var(--notes-line));
    background: var(--notes-card);
  }
}

/* The matrix wordmarks are dark, fixed brand assets. Keep their shared footer
   a quiet light component island until every brand ships a verified dark mark. */
.matrix-network-footer {
  color-scheme: light;
  color: #101822;
  border-color: rgba(176, 170, 158, 0.22) !important;
  background: #f5f4ef !important;
}

.matrix-network-footer .matrix-network-card {
  border-color: rgba(176, 170, 158, 0.2) !important;
}

.matrix-network-footer .matrix-network-card:hover {
  background: color-mix(in srgb, var(--matrix-accent) 7%, #f5f4ef) !important;
}

.matrix-network-footer .matrix-network-sub {
  color: #687378 !important;
}

.icp-footer {
  color-scheme: light;
  color: #687378;
  background: #f5f4ef !important;
}

@media (max-width: 900px) {
  .home-screen .site-header .header-tools {
    display: flex;
  }

  .home-screen .site-header .header-tools > :not(.theme-toggle) {
    display: none;
  }

  .home-screen .theme-toggle {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .theme-toggle {
    color: ButtonText;
    border: 1px solid ButtonText;
    background: ButtonFace;
  }
}