:root,
html[data-theme="light"] {
  color-scheme: light;
  --teal: #0b716b;
  --teal-dark: #075c57;
  --teal-light: #d5f0ec;
  --teal-2: #0b716b;
  --bg: #f4f7f6;
  --bg-card: #ffffff;
  --bg-card-hover: #eef4f2;
  --bg-elevated: #e7efed;
  --card: #ffffff;
  --card-2: #eef4f2;
  --surface: #ffffff;
  --surface-2: #eef4f2;
  --dark: #16211f;
  --white: #16211f;
  --text: #16211f;
  --text-muted: #53635f;
  --text-secondary: #40504c;
  --text-dim: #5f6f6b;
  --muted: #53635f;
  --dim: #5f6f6b;
  --border: #dbe6e3;
  --line: #dbe6e3;
  --ok-bg: #e4f5f2;
  --green-bg: #e8f6ed;
  --shadow: 0 20px 55px rgba(27, 65, 59, .11);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --teal: #6bd1c7;
  --teal-dark: #8be2d9;
  --teal-light: #80cbc4;
  --teal-2: #80cbc4;
  --bg: #101513;
  --bg-card: #171d1b;
  --bg-card-hover: #202825;
  --bg-elevated: #202825;
  --card: #171d1b;
  --card-2: #202825;
  --surface: #171d1b;
  --surface-2: #202825;
  --dark: #0b211e;
  --white: #f0f5f3;
  --text: #f0f5f3;
  --text-muted: #b4c0bc;
  --text-secondary: #c8d2cf;
  --text-dim: #93a19d;
  --muted: #b4c0bc;
  --dim: #93a19d;
  --border: #2a3532;
  --line: #2a3532;
  --ok-bg: #173a36;
  --green-bg: #173522;
  --shadow: 0 22px 62px rgba(0, 0, 0, .34);
}

body,
html body {
  background-color: var(--bg);
  color: var(--text);
}

html[data-theme="light"] body {
  background-image: radial-gradient(circle at top, rgba(11, 113, 107, .08), transparent 38%);
}

.nav,
html[data-theme="light"] .nav {
  background: rgba(244, 247, 246, .92);
}
html[data-theme="dark"] .nav { background: rgba(16, 21, 19, .92); }

.article-card,
.hero-panel,
.list-card,
.meta-card,
.empty-card,
.cta-card,
.card,
.policy .highlight,
.policy-header .entity,
.toc,
.contact-card,
.details,
.status {
  background-color: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="light"] .article-card,
html[data-theme="light"] .hero-panel,
html[data-theme="light"] .list-card,
html[data-theme="light"] .meta-card,
html[data-theme="light"] .empty-card,
html[data-theme="light"] .card,
html[data-theme="light"] .article-card-featured {
  background-image: linear-gradient(180deg, #ffffff, #f8fbfa);
}

html[data-theme="light"] .phone-frame,
html[data-theme="light"] .phone-notch,
html[data-theme="light"] .phone-screen,
html[data-theme="light"] .phone-shell,
html[data-theme="light"] .mock-card {
  border-color: #34413e;
}

.theme-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .55rem .75rem;
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--teal); }
.theme-toggle:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.theme-icon { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; }
html[data-theme="dark"] .theme-icon { background: currentColor; }

.nav .theme-toggle { margin-left: auto; }
.nav-links + .theme-toggle { margin-left: 0; }
.page-header { grid-template-columns: minmax(0, 1fr) auto; }
.page-header .page-title-copy { grid-column: 1 / -1; }
.theme-corner { position: fixed; top: 12px; right: 12px; z-index: 100; }

html[data-theme="light"] .footer-brand-sub,
html[data-theme="light"] .footer-col a,
html[data-theme="light"] .footer-copy,
html[data-theme="light"] .footer-store-badge { color: var(--text-dim); }
html[data-theme="light"] .status { color: var(--text); }
html[data-theme="light"] .hero-value { color: #14532d; }
html[data-theme="light"] .hero-caption { color: #22633a; }
html[data-theme="light"] .nav-cta { color: #fff; }
html[data-theme="light"] .btn-primary { color: #fff; }
html[data-theme="light"] .store-woolies { color: #236b27; }
html[data-theme="light"] .store-coles { color: #a30f18; }
html[data-theme="light"] .store-aldi { color: #285b9f; }
html[data-theme="light"] .stat-label { color: #40504c; }

/* Blog "featured" card (theme-state repair, Discord sources 2026-08-27
   and runtime rejection 1542349385881493544):
   the homepage inline rule hardcodes a dark gradient bottom
   (rgba(24,25,28,.95)), which survives into light theme and buries the
   first card's title/summary/meta in dark-on-dark. Re-express the accent
   gradient in tokens so BOTH themes resolve a readable card surface; the
   text inherits the theme text colors untouched. */
.journal-card.featured {
  background: linear-gradient(180deg, rgba(11, 113, 107, .10), var(--bg-card) 58%);
  border-color: rgba(11, 113, 107, .22);
}
html[data-theme="dark"] .journal-card.featured {
  background: linear-gradient(180deg, rgba(107, 209, 199, .12), var(--bg-card) 58%);
  border-color: rgba(107, 209, 199, .20);
}

/* iOS Safari can retain :hover after an external App Store transition.
   Touch/coarse pointers have no durable hover intent, so restore the ordinary
   CTA treatment while keeping mouse and trackpad hover feedback unchanged. */
@media (hover: none), (pointer: coarse) {
  .nav-cta:hover {
    background: var(--teal);
    transform: none;
  }
  .btn-primary:hover {
    background: var(--teal);
    transform: none;
    box-shadow: 0 4px 20px rgba(77, 182, 172, .3);
  }
}

@media (max-width: 760px) {
  .theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .theme-toggle { padding: .55rem; }
}