diff --git a/src/newtab/newtab.css b/src/newtab/newtab.css
index 6174fb7..5b1acb9 100644
--- a/src/newtab/newtab.css
+++ b/src/newtab/newtab.css
@@ -17,6 +17,35 @@
   --danger:     #c9685b;
   --radius:     8px;
   --maxw:       760px;
+  --watermark-opacity: 0.025;
+}
+
+/* ──────────────────────────────────────────────────────────────────────
+   Light mode (v0.5.0) — auto-follows OS theme. Same approach as popup:
+   override :root vars so every existing rule using var(--*) keeps
+   working unchanged. Watermark opacity bumped slightly since the
+   helmet contrasts more against light bg.
+   ────────────────────────────────────────────────────────────────────── */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg:         #f6f4ed;
+    --bg-soft:    #ece5d2;
+    --bg-row:     #ddd6c0;
+    --bg-row-hi:  #c8c0a8;
+    --fg:         #2a2f28;
+    --fg-muted:   #6a7064;
+    --accent:     #2a7d3e;
+    --accent-dim: #6dbf7a;
+    --cream:      #b8861a;
+    --danger:     #b53a2b;
+    --watermark-opacity: 0.04;
+  }
+
+  /* State pills — keep them readable when their background is solid */
+  .nt-state-pill[data-state="playing"]   { color: #fff; }
+  .nt-state-pill[data-state="buffering"] { color: #fff; }
+  .nt-state-pill[data-state="error"]     { color: #fff; }
+  .nt-btn--primary[aria-pressed="true"]  { color: #fff; }
 }
 
 * { box-sizing: border-box; }
@@ -40,7 +69,7 @@ body::before {
   background-repeat: no-repeat;
   background-position: center;
   background-size: min(60vh, 600px);
-  opacity: 0.025;
+  opacity: var(--watermark-opacity);
   pointer-events: none;
   z-index: 0;
 }
diff --git a/src/options/options.css b/src/options/options.css
index 395fb7a..3ea38b2 100644
--- a/src/options/options.css
+++ b/src/options/options.css
@@ -16,6 +16,34 @@
   --radius:     6px;
 }
 
+/* ──────────────────────────────────────────────────────────────────────
+   Light mode (v0.5.0) — auto-follows OS theme. Same approach as popup
+   + newtab: flip the :root vars only. Existing rules using var(--*)
+   carry over unchanged. Toast text + danger-button hover adjusted for
+   light-bg readability.
+   ────────────────────────────────────────────────────────────────────── */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg:         #f6f4ed;
+    --bg-soft:    #ece5d2;
+    --bg-row:     #ddd6c0;
+    --bg-row-hi:  #c8c0a8;
+    --fg:         #2a2f28;
+    --fg-muted:   #6a7064;
+    --accent:     #2a7d3e;
+    --accent-dim: #6dbf7a;
+    --cream:      #b8861a;
+    --danger:     #b53a2b;
+  }
+
+  /* Toast — keep readable when its background is solid accent / danger */
+  .opt-toast                    { color: #fff; }
+  .opt-toast[data-tone="error"] { color: #fff; }
+
+  /* Danger button hover — text flips to white when bg goes red */
+  .opt-btn--danger:hover { color: #fff; }
+}
+
 * { box-sizing: border-box; }
 
 html, body {
diff --git a/src/popup/popup.css b/src/popup/popup.css
index 93fc4a8..dca6449 100644
--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -14,6 +14,38 @@
   --cream:      #f4e9b7;
   --danger:     #c9685b;
   --radius:     6px;
+
+  /* First-run hint pulse colour (RGB tuple — alpha applied in keyframes). */
+  --pulse-rgb:  109, 191, 122;
+}
+
+/* ──────────────────────────────────────────────────────────────────────
+   Light mode (v0.5.0) — auto-follows OS theme via prefers-color-scheme.
+   Flips backgrounds + foregrounds to a cream-leaning palette while
+   preserving the brand green as the accent. Every existing rule that
+   uses the var(--*) tokens keeps working unchanged.
+   ────────────────────────────────────────────────────────────────────── */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg:         #f6f4ed;    /* cream-leaning off-white */
+    --bg-soft:    #ece5d2;    /* slightly darker for header bars */
+    --bg-row:     #ddd6c0;    /* hover background */
+    --bg-row-hi:  #c8c0a8;    /* active row background */
+    --fg:         #2a2f28;    /* dark forest-green-leaning text */
+    --fg-muted:   #6a7064;    /* muted secondary text */
+    --accent:     #2a7d3e;    /* darker brand green for primary contrast */
+    --accent-dim: #6dbf7a;    /* lighter brand green for fills */
+    --cream:      #b8861a;    /* darker amber — readable on light bg */
+    --danger:     #b53a2b;    /* darker red — readable on light bg */
+  }
+
+  /* State pills — light-mode adjustments so playing/buffering states
+     stay readable. The "playing" green stays bright but text flips white;
+     "buffering" cream gets dark text since the cream is now amber. */
+  .tuner-state[data-state="playing"]   { color: #fff; }
+  .tuner-state[data-state="buffering"] { color: #fff; }
+  .tuner-state[data-state="error"]     { color: #fff; }
+  .btn-primary[aria-pressed="true"]    { color: #fff; }
 }
 
 * { box-sizing: border-box; }