From 7c91e68cd135b67c539b8d31756c35e2e0084f19 Mon Sep 17 00:00:00 2001
From: khannurien <yo@vincentlannurien.com>
Date: Sat, 19 Sep 2026 19:34:32 +0000
Subject: [PATCH] =?UTF-8?q?v3:=20brutalist,=20geocities=20and=20nyt=20on?=
 =?UTF-8?q?=20the=20token=20system=20=E2=80=94=20single=20light-dark()=20p?=
 =?UTF-8?q?alettes,=20radius=20scale=20instead=20of=20per-selector=20overr?=
 =?UTF-8?q?ides?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/themes/brutalist.css | 270 ++++++--------------------------------
 src/themes/geocities.css | 272 ++++++++-------------------------------
 src/themes/nyt.css       | 228 +++++---------------------------
 3 files changed, 130 insertions(+), 640 deletions(-)

diff --git a/src/themes/brutalist.css b/src/themes/brutalist.css
index 3d45719e..53650f4b 100644
--- a/src/themes/brutalist.css
+++ b/src/themes/brutalist.css
@@ -3,132 +3,31 @@
    Palette: Eggshell · Burnt Peach · Twilight Indigo · Muted Teal · Apricot Cream
    ══════════════════════════════════════════════════════════════════════ */
 
-/* ── Dark variant (default for this theme) ────────────────────────── */
+/* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
 :root[data-style="brutalist"] {
-  --color-text: #f4f1de; /* Eggshell */
-  --color-text-secondary: #c8c5b2;
-  --color-text-muted: #8e8c80;
-  --color-on-accent: #3d405b; /* Twilight Indigo on Apricot Cream */
-
-  --color-bg: #252838; /* darkened Twilight Indigo */
-  --color-surface: #2e3145;
-
-  --color-border: #4a4e6a;
-  --color-border-subtle: rgba(74, 78, 106, 0.4);
-
-  --color-accent: #f2cc8f; /* Apricot Cream */
-  --color-accent-hover: #d4a860;
-
-  --color-link: #f2cc8f;
-  --color-link-hover: #d4a860;
-
-  --color-danger: #e07a5f; /* Burnt Peach */
-  --color-danger-bg: #3a1e18;
-  --color-danger-hover: #c85a40;
-
-  --color-success: #81b29a; /* Muted Teal */
-  --color-success-bg: #1a2e26;
-  --color-success-hover: #5a9878;
-
-  --color-overlay: rgba(0, 0, 0, 0.6);
-  --color-header-user-bg: rgba(242, 204, 143, 0.07);
-  --color-header-user-bg-hover: rgba(242, 204, 143, 0.14);
-
-  --color-option-bg: #222436;
-  --color-option-border: #252838;
-}
-
-/* ── Light via system preference (auto color-scheme) ──────────────── */
-@media (prefers-color-scheme: light) {
-  :root[data-style="brutalist"]:not([data-color-scheme]) {
-    --color-text: #3d405b; /* Twilight Indigo */
-    --color-text-secondary: #5a5e80;
-    --color-text-muted: #7a7e9a;
-    --color-on-accent: #f4f1de; /* Eggshell on Burnt Peach */
-
-    --color-bg: #f4f1de; /* Eggshell */
-    --color-surface: #f8f5e8;
-
-    --color-border: #8a8da8;
-    --color-border-subtle: rgba(61, 64, 91, 0.25);
-
-    --color-accent: #e07a5f; /* Burnt Peach — visible against Eggshell */
-    --color-accent-hover: #c05040;
-
-    --color-link: #b85a3a; /* darkened Burnt Peach for legibility */
-    --color-link-hover: #943020;
-
-    --color-danger: #c04030;
-    --color-danger-bg: #fae4e0;
-    --color-danger-hover: #a02820;
-
-    --color-success: #3a7860;
-    --color-success-bg: #e0f0ea;
-    --color-success-hover: #286048;
-
-    --color-overlay: rgba(0, 0, 0, 0.5);
-    --color-header-user-bg: rgba(224, 122, 95, 0.08);
-    --color-header-user-bg-hover: rgba(224, 122, 95, 0.16);
-
-    --color-option-bg: #ede9d4;
-    --color-option-border: #e0dcc8;
-  }
-}
-
-/* ── Manual dark override ─────────────────────────────────────────── */
-:root[data-style="brutalist"][data-color-scheme="dark"] {
-  color-scheme: dark;
-  --color-text: #f4f1de;
-  --color-text-secondary: #c8c5b2;
-  --color-text-muted: #8e8c80;
-  --color-on-accent: #3d405b;
-  --color-bg: #252838;
-  --color-surface: #2e3145;
-  --color-border: #4a4e6a;
-  --color-border-subtle: rgba(74, 78, 106, 0.4);
-  --color-accent: #f2cc8f;
-  --color-accent-hover: #d4a860;
-  --color-link: #f2cc8f;
-  --color-link-hover: #d4a860;
-  --color-danger: #e07a5f;
-  --color-danger-bg: #3a1e18;
-  --color-danger-hover: #c85a40;
-  --color-success: #81b29a;
-  --color-success-bg: #1a2e26;
-  --color-success-hover: #5a9878;
-  --color-overlay: rgba(0, 0, 0, 0.6);
-  --color-header-user-bg: rgba(242, 204, 143, 0.07);
-  --color-header-user-bg-hover: rgba(242, 204, 143, 0.14);
-  --color-option-bg: #222436;
-  --color-option-border: #252838;
-}
-
-/* ── Manual light override ────────────────────────────────────────── */
-:root[data-style="brutalist"][data-color-scheme="light"] {
-  color-scheme: light;
-  --color-text: #3d405b;
-  --color-text-secondary: #5a5e80;
-  --color-text-muted: #7a7e9a;
-  --color-on-accent: #f4f1de;
-  --color-bg: #f4f1de;
-  --color-surface: #f8f5e8;
-  --color-border: #8a8da8;
-  --color-border-subtle: rgba(61, 64, 91, 0.25);
-  --color-accent: #e07a5f;
-  --color-accent-hover: #c05040;
-  --color-link: #b85a3a;
-  --color-link-hover: #943020;
-  --color-danger: #c04030;
-  --color-danger-bg: #fae4e0;
-  --color-danger-hover: #a02820;
-  --color-success: #3a7860;
-  --color-success-bg: #e0f0ea;
-  --color-success-hover: #286048;
-  --color-overlay: rgba(0, 0, 0, 0.5);
-  --color-header-user-bg: rgba(224, 122, 95, 0.08);
-  --color-header-user-bg-hover: rgba(224, 122, 95, 0.16);
-  --color-option-bg: #ede9d4;
-  --color-option-border: #e0dcc8;
+  --color-text: light-dark(#3d405b, #f4f1de);
+  --color-text-secondary: light-dark(#5a5e80, #c8c5b2);
+  --color-text-muted: light-dark(#7a7e9a, #8e8c80);
+  --color-on-accent: light-dark(#f4f1de, #3d405b);
+  --color-bg: light-dark(#f4f1de, #252838);
+  --color-surface: light-dark(#f8f5e8, #2e3145);
+  --color-border: light-dark(#8a8da8, #4a4e6a);
+  --color-border-subtle: light-dark(rgba(61, 64, 91, 0.25), rgba(74, 78, 106, 0.4));
+  --color-accent: light-dark(#e07a5f, #f2cc8f);
+  --color-accent-hover: light-dark(#c05040, #d4a860);
+  --color-link: light-dark(#b85a3a, #f2cc8f);
+  --color-link-hover: light-dark(#943020, #d4a860);
+  --color-danger: light-dark(#c04030, #e07a5f);
+  --color-danger-bg: light-dark(#fae4e0, #3a1e18);
+  --color-danger-hover: light-dark(#a02820, #c85a40);
+  --color-success: light-dark(#3a7860, #81b29a);
+  --color-success-bg: light-dark(#e0f0ea, #1a2e26);
+  --color-success-hover: light-dark(#286048, #5a9878);
+  --color-overlay: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6));
+  --color-header-user-bg: light-dark(rgba(224, 122, 95, 0.08), rgba(242, 204, 143, 0.07));
+  --color-header-user-bg-hover: light-dark(rgba(224, 122, 95, 0.16), rgba(242, 204, 143, 0.14));
+  --color-option-bg: light-dark(#ede9d4, #222436);
+  --color-option-border: light-dark(#e0dcc8, #252838);
 }
 
 /* ══════════════════════════════════════════════════════════════════════
@@ -138,6 +37,14 @@
 /* ── Typography ──────────────────────────────────────────────────── */
 [data-style="brutalist"] {
   --font-body: "Space Grotesk", "Saira", sans-serif;
+
+  /* Hard edges everywhere App.css uses the radius scale. */
+  --radius-xs: 0;
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-full: 0;
   font-family: var(--font-body);
   font-weight: 500;
 }
@@ -148,6 +55,16 @@
   letter-spacing: 0.03em;
 }
 
+/* Circles App.css draws with a literal 50% (not the radius scale) — square
+   them off too. */
+[data-style="brutalist"] .avatar-img,
+[data-style="brutalist"] .avatar-initials,
+[data-style="brutalist"] .avatar-change-overlay,
+[data-style="brutalist"] .notif-icon,
+[data-style="brutalist"] .notif-dot {
+  border-radius: 0;
+}
+
 /* ── Buttons — square corners, modest hard shadow ────────────────── */
 /* `.dump-fab` is exempt from the generic button chrome — it keeps its own
    shape, shadow and animations — but this hard-edged theme squares it off. */
@@ -157,7 +74,6 @@
 }
 
 [data-style="brutalist"] button:not(.dump-fab, .chat-fab) {
-  border-radius: 0;
   border: 2px solid var(--color-border);
   font-weight: 700;
   box-shadow: 2px 2px 0 var(--color-border);
@@ -170,18 +86,6 @@
   transform: translate(2px, 2px);
 }
 
-/* In the light variant the resting text colour is dark, but on hover the
-   danger button fills with the dark --color-danger-hover. Force light text on
-   hover so the label stays legible. */
-@media (prefers-color-scheme: light) {
-  :root[data-style="brutalist"]:not([data-color-scheme]) .btn-danger:hover {
-    color: #fff;
-  }
-}
-:root[data-style="brutalist"][data-color-scheme="light"] .btn-danger:hover {
-  color: #fff;
-}
-
 /* Ghost / icon-only buttons — keep borderless, no press effect */
 [data-style="brutalist"] .modal-close-btn,
 [data-style="brutalist"] .playlist-remove-btn,
@@ -234,13 +138,11 @@
 
 /* ── Segmented controls / visibility-toggle ──────────────────────── */
 [data-style="brutalist"] .visibility-toggle {
-  border-radius: 0;
   border: 2px solid var(--color-border);
   box-shadow: 2px 2px 0 var(--color-border);
 }
 
 [data-style="brutalist"] .visibility-toggle button {
-  border-radius: 0;
   border: none;
   box-shadow: none;
 }
@@ -253,7 +155,6 @@
 /* ── Cards ───────────────────────────────────────────────────────── */
 [data-style="brutalist"] .dump-card,
 [data-style="brutalist"] .playlist-card {
-  border-radius: 0;
   border: 2px solid var(--color-border);
   box-shadow: 3px 3px 0 var(--color-border);
   transition:
@@ -280,7 +181,6 @@
 
 /* ── Dump post detail header ─────────────────────────────────────── */
 [data-style="brutalist"] .dump-post-header {
-  border-radius: 0;
   border: 2px solid var(--color-border);
   box-shadow: 3px 3px 0 var(--color-border);
 }
@@ -291,7 +191,6 @@
 }
 
 [data-style="brutalist"] .app-header-user {
-  border-radius: 0;
   border: 2px solid var(--color-border);
   box-shadow: 2px 2px 0 var(--color-border);
   transition: box-shadow 0.08s ease, transform 0.08s ease, background 0.1s;
@@ -319,29 +218,15 @@
   box-shadow: 2px 2px 0 var(--color-accent);
 }
 
-/* ── Category management chips / inline editor ───────────────────── */
-[data-style="brutalist"] .category-chip,
-[data-style="brutalist"] .category-editor,
-[data-style="brutalist"] .category-editor-btn,
-[data-style="brutalist"] .dump-card-category-chip,
-[data-style="brutalist"] .profile-role-chip {
-  border-radius: 0;
-}
 
 [data-style="brutalist"] .category-editor {
   box-shadow: 2px 2px 0 var(--color-accent);
 }
 
-/* ── Search bar ──────────────────────────────────────────────────── */
-[data-style="brutalist"] .search-bar-input,
-[data-style="brutalist"] .search-bar-btn {
-  border-radius: 0;
-}
 
 /* ── Modals ──────────────────────────────────────────────────────── */
 [data-style="brutalist"] .modal-card,
 [data-style="brutalist"] .confirm-modal {
-  border-radius: 0;
   border: 2px solid var(--color-border);
   box-shadow: 4px 4px 0 var(--color-border);
 }
@@ -364,19 +249,10 @@
   border-bottom-width: 2px;
 }
 
-/* ── Avatars — square ────────────────────────────────────────────── */
-[data-style="brutalist"] .avatar-img,
-[data-style="brutalist"] .avatar-initials {
-  border-radius: 0;
-}
 
-[data-style="brutalist"] .avatar-change-overlay {
-  border-radius: 0;
-}
 
 /* ── Rich content cards ──────────────────────────────────────────── */
 [data-style="brutalist"] .rich-content-card {
-  border-radius: 0;
   box-shadow: 3px 3px 0 var(--color-border);
 }
 
@@ -405,31 +281,14 @@
   box-shadow: 3px 3px 0 var(--color-accent);
 }
 
-/* ── File drop zone ──────────────────────────────────────────────── */
-[data-style="brutalist"] .fdz {
-  border-radius: 0;
-}
 
 /* ── Global persistent player ────────────────────────────────────── */
 [data-style="brutalist"] .global-player {
-  border-radius: 0;
   border: 2px solid var(--color-border);
   box-shadow: 0 0 0 2px var(--color-border);
 }
 
-[data-style="brutalist"] .global-player-iframe-wrap,
-[data-style="brutalist"] .global-player-media-wrap,
-[data-style="brutalist"] .global-player .audio-player,
-[data-style="brutalist"] .global-player .video-player {
-  border-radius: 0;
-}
 
-/* Queue UI: square off the artwork and the stream progress bar. */
-[data-style="brutalist"] .global-player-artwork,
-[data-style="brutalist"] .audio-player-track--stream::before,
-[data-style="brutalist"] .audio-player-track--stream .audio-player-fill {
-  border-radius: 0;
-}
 
 [data-style="brutalist"] .global-player .audio-player-btn {
   background: transparent;
@@ -451,38 +310,20 @@
 
 /* ── Notification items ──────────────────────────────────────────── */
 [data-style="brutalist"] .notification-item {
-  border-radius: 0;
   border: 2px solid var(--color-border);
   box-shadow: 2px 2px 0 var(--color-border);
 }
 
-[data-style="brutalist"] .notifications-unread-pill {
-  border-radius: 0;
-}
 
 [data-style="brutalist"] .notif-dot {
-  border-radius: 0;
   box-shadow: none;
 }
 
-[data-style="brutalist"] .notif-icon {
-  border-radius: 0;
-}
 
-/* ── Notification badge ──────────────────────────────────────────── */
-[data-style="brutalist"] .notification-badge {
-  border-radius: 0;
-}
 
-/* ── Markdown code ───────────────────────────────────────────────── */
-[data-style="brutalist"] .md code,
-[data-style="brutalist"] .md pre {
-  border-radius: 0;
-}
 
 /* ── User result items (search) ──────────────────────────────────── */
 [data-style="brutalist"] .user-result-item {
-  border-radius: 0;
   border: 2px solid var(--color-border);
   box-shadow: 2px 2px 0 var(--color-border);
   transition: box-shadow 0.08s ease, transform 0.08s ease, border-color 0.1s;
@@ -494,14 +335,9 @@
   transform: translate(-2px, -2px);
 }
 
-/* ── Feed tab bar ────────────────────────────────────────────────── */
-[data-style="brutalist"] .feed-tab {
-  border-radius: 0;
-}
 
 /* ── btn-primary ─────────────────────────────────────────────────── */
 [data-style="brutalist"] .btn-primary {
-  border-radius: 0;
   border: 2px solid var(--color-border);
   box-shadow: 2px 2px 0 var(--color-border);
   transition: box-shadow 0.08s ease, transform 0.08s ease;
@@ -519,7 +355,6 @@
 
 /* ── btn-border ──────────────────────────────────────────────────── */
 [data-style="brutalist"] .btn-border {
-  border-radius: 0;
   box-shadow: 2px 2px 0 var(--color-border);
 }
 
@@ -528,28 +363,11 @@
   transform: translate(2px, 2px);
 }
 
-/* ── Comment actions ─────────────────────────────────────────────── */
-[data-style="brutalist"] .comment-submit-btn,
-[data-style="brutalist"] .comment-action-btn {
-  border-radius: 0;
-}
 
-/* ── Error card ──────────────────────────────────────────────────── */
-[data-style="brutalist"] .error-card {
-  border-radius: 0;
-}
 
 /* ── Category switcher dropdown ──────────────────────────────────── */
-/* The trigger reuses .feed-sort-btn, so it already wears this theme's button
-   chrome and lines up with the sort tabs. The menu keeps the shared popover
-   frame (matching .user-menu-dropdown here); only flatten its option buttons
-   so they read as list rows rather than chunky bevelled buttons. */
-[data-style="brutalist"] .category-switcher-menu {
-  border-radius: 0;
-}
 [data-style="brutalist"] .category-switcher-option {
   border: none !important;
-  border-radius: 0;
   box-shadow: none !important;
 }
 [data-style="brutalist"] .category-switcher-option:hover:not(:disabled) {
@@ -557,7 +375,3 @@
   box-shadow: none !important;
 }
 
-/* ── Journal masonry cards ───────────────────────────────────────── */
-[data-style="brutalist"] .journal-card {
-  border-radius: 0;
-}
diff --git a/src/themes/geocities.css b/src/themes/geocities.css
index 8a468331..6cc411bc 100644
--- a/src/themes/geocities.css
+++ b/src/themes/geocities.css
@@ -7,41 +7,39 @@
    Light scheme → classic GeoCities pastel-on-wallpaper.
    ══════════════════════════════════════════════════════════════════════ */
 
-/* ── Dark variant (default for this theme) ────────────────────────── */
+/* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
 :root[data-style="geocities"] {
-  --color-text: #f2f0ff;
-  --color-text-secondary: #7fdbff; /* cyan */
-  --color-text-muted: #a99ad6; /* faded violet */
-  --color-on-accent: #000000; /* black on hot magenta */
+  /* Square corners everywhere App.css uses the radius scale. */
+  --radius-xs: 0;
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-full: 0;
 
-  --color-bg: #0a0a2e; /* deep indigo night */
-  --color-surface: #1b1b46; /* raised panel */
-
-  --color-border: #00ffff; /* neon cyan */
-  --color-border-subtle: rgba(0, 255, 255, 0.28);
-
-  --color-accent: #ff00ff; /* hot magenta */
-  --color-accent-hover: #ff5cff;
-
-  --color-link: #00ffff; /* classic bright link */
-  --color-link-hover: #ffff00; /* yellow on hover, very 1999 */
-
-  --color-danger: #ff3860;
-  --color-danger-bg: #3a0a1a;
-  --color-danger-hover: #ff6b8a;
-
-  --color-success: #39ff14; /* neon green */
-  --color-success-bg: #0a2e0a;
-  --color-success-hover: #6fff52;
-
-  --color-overlay: rgba(8, 0, 28, 0.72);
-  --color-header-user-bg: rgba(0, 255, 255, 0.1);
-  --color-header-user-bg-hover: rgba(0, 255, 255, 0.2);
-
-  --color-option-bg: #14143a;
-  --color-option-border: #00ffff;
-
-  /* Theme-local helpers */
+  --color-text: light-dark(#2a1a4e, #f2f0ff);
+  --color-text-secondary: light-dark(#aa00aa, #7fdbff);
+  --color-text-muted: light-dark(#7a6a9a, #a99ad6);
+  --color-on-accent: light-dark(#ffffff, #000000);
+  --color-bg: light-dark(#fff0f8, #0a0a2e);
+  --color-surface: light-dark(#ffffff, #1b1b46);
+  --color-border: light-dark(#d000d0, #00ffff);
+  --color-border-subtle: light-dark(rgba(208, 0, 208, 0.25), rgba(0, 255, 255, 0.28));
+  --color-accent: light-dark(#d000d0, #ff00ff);
+  --color-accent-hover: light-dark(#a000a0, #ff5cff);
+  --color-link: light-dark(#0000ee, #00ffff);
+  --color-link-hover: light-dark(#551a8b, #ffff00);
+  --color-danger: light-dark(#cc0033, #ff3860);
+  --color-danger-bg: light-dark(#ffe0e8, #3a0a1a);
+  --color-danger-hover: light-dark(#990022, #ff6b8a);
+  --color-success: light-dark(#008800, #39ff14);
+  --color-success-bg: light-dark(#e0ffe0, #0a2e0a);
+  --color-success-hover: light-dark(#006600, #6fff52);
+  --color-overlay: light-dark(rgba(40, 0, 40, 0.4), rgba(8, 0, 28, 0.72));
+  --color-header-user-bg: light-dark(rgba(208, 0, 208, 0.08), rgba(0, 255, 255, 0.1));
+  --color-header-user-bg-hover: light-dark(rgba(208, 0, 208, 0.16), rgba(0, 255, 255, 0.2));
+  --color-option-bg: light-dark(#fff0fb, #14143a);
+  --color-option-border: light-dark(#d000d0, #00ffff);
   --geo-rainbow: linear-gradient(
     90deg,
     #ff004d,
@@ -51,9 +49,7 @@
     #00b3ff,
     #b300ff
   );
-  /* Starfield: white pinpricks plus the odd coloured star */
-  --geo-pattern:
-    radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
+  --geo-pattern: radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
     radial-gradient(1px 1px at 130px 80px, #ffffff, transparent),
     radial-gradient(1.5px 1.5px at 80px 150px, #00ffff, transparent),
     radial-gradient(1.5px 1.5px at 170px 40px, #ff00ff, transparent),
@@ -61,127 +57,10 @@
   --geo-pattern-size: 200px 200px;
 }
 
-/* ── Light via system preference (auto color-scheme) ──────────────── */
+/* Non-colour values can't go through light-dark(), so the light variants
+   of these still need their own scheme selectors. */
 @media (prefers-color-scheme: light) {
   :root[data-style="geocities"]:not([data-color-scheme]) {
-    --color-text: #2a1a4e;
-    --color-text-secondary: #aa00aa;
-    --color-text-muted: #7a6a9a;
-    --color-on-accent: #ffffff;
-
-    --color-bg: #fff0f8; /* pale lavender wallpaper */
-    --color-surface: #ffffff;
-
-    --color-border: #d000d0;
-    --color-border-subtle: rgba(208, 0, 208, 0.25);
-
-    --color-accent: #d000d0;
-    --color-accent-hover: #a000a0;
-
-    --color-link: #0000ee; /* unvisited blue */
-    --color-link-hover: #551a8b; /* visited purple */
-
-    --color-danger: #cc0033;
-    --color-danger-bg: #ffe0e8;
-    --color-danger-hover: #990022;
-
-    --color-success: #008800;
-    --color-success-bg: #e0ffe0;
-    --color-success-hover: #006600;
-
-    --color-overlay: rgba(40, 0, 40, 0.4);
-    --color-header-user-bg: rgba(208, 0, 208, 0.08);
-    --color-header-user-bg-hover: rgba(208, 0, 208, 0.16);
-
-    --color-option-bg: #fff0fb;
-    --color-option-border: #d000d0;
-
-    --geo-rainbow: linear-gradient(
-      90deg,
-      #ff004d,
-      #ff8a00,
-      #ffcc00,
-      #00aa1a,
-      #0077dd,
-      #8800cc
-    );
-    --geo-pattern:
-      radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
-      radial-gradient(rgba(0, 179, 255, 0.14) 1.5px, transparent 1.5px);
-    --geo-pattern-size: 22px 22px, 22px 22px;
-  }
-}
-
-/* ── Manual dark override ─────────────────────────────────────────── */
-:root[data-style="geocities"][data-color-scheme="dark"] {
-  color-scheme: dark;
-  --color-text: #f2f0ff;
-  --color-text-secondary: #7fdbff;
-  --color-text-muted: #a99ad6;
-  --color-on-accent: #000000;
-  --color-bg: #0a0a2e;
-  --color-surface: #1b1b46;
-  --color-border: #00ffff;
-  --color-border-subtle: rgba(0, 255, 255, 0.28);
-  --color-accent: #ff00ff;
-  --color-accent-hover: #ff5cff;
-  --color-link: #00ffff;
-  --color-link-hover: #ffff00;
-  --color-danger: #ff3860;
-  --color-danger-bg: #3a0a1a;
-  --color-danger-hover: #ff6b8a;
-  --color-success: #39ff14;
-  --color-success-bg: #0a2e0a;
-  --color-success-hover: #6fff52;
-  --color-overlay: rgba(8, 0, 28, 0.72);
-  --color-header-user-bg: rgba(0, 255, 255, 0.1);
-  --color-header-user-bg-hover: rgba(0, 255, 255, 0.2);
-  --color-option-bg: #14143a;
-  --color-option-border: #00ffff;
-  --geo-rainbow: linear-gradient(
-    90deg,
-    #ff004d,
-    #ff8a00,
-    #ffee00,
-    #00d11a,
-    #00b3ff,
-    #b300ff
-  );
-  --geo-pattern:
-    radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
-    radial-gradient(1px 1px at 130px 80px, #ffffff, transparent),
-    radial-gradient(1.5px 1.5px at 80px 150px, #00ffff, transparent),
-    radial-gradient(1.5px 1.5px at 170px 40px, #ff00ff, transparent),
-    radial-gradient(1px 1px at 50px 190px, #ffee00, transparent);
-  --geo-pattern-size: 200px 200px;
-}
-
-/* ── Manual light override ────────────────────────────────────────── */
-:root[data-style="geocities"][data-color-scheme="light"] {
-  color-scheme: light;
-  --color-text: #2a1a4e;
-  --color-text-secondary: #aa00aa;
-  --color-text-muted: #7a6a9a;
-  --color-on-accent: #ffffff;
-  --color-bg: #fff0f8;
-  --color-surface: #ffffff;
-  --color-border: #d000d0;
-  --color-border-subtle: rgba(208, 0, 208, 0.25);
-  --color-accent: #d000d0;
-  --color-accent-hover: #a000a0;
-  --color-link: #0000ee;
-  --color-link-hover: #551a8b;
-  --color-danger: #cc0033;
-  --color-danger-bg: #ffe0e8;
-  --color-danger-hover: #990022;
-  --color-success: #008800;
-  --color-success-bg: #e0ffe0;
-  --color-success-hover: #006600;
-  --color-overlay: rgba(40, 0, 40, 0.4);
-  --color-header-user-bg: rgba(208, 0, 208, 0.08);
-  --color-header-user-bg-hover: rgba(208, 0, 208, 0.16);
-  --color-option-bg: #fff0fb;
-  --color-option-border: #d000d0;
   --geo-rainbow: linear-gradient(
     90deg,
     #ff004d,
@@ -191,8 +70,23 @@
     #0077dd,
     #8800cc
   );
-  --geo-pattern:
-    radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
+  --geo-pattern: radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
+    radial-gradient(rgba(0, 179, 255, 0.14) 1.5px, transparent 1.5px);
+  --geo-pattern-size: 22px 22px, 22px 22px;
+  }
+}
+
+:root[data-style="geocities"][data-color-scheme="light"] {
+  --geo-rainbow: linear-gradient(
+    90deg,
+    #ff004d,
+    #ff8a00,
+    #ffcc00,
+    #00aa1a,
+    #0077dd,
+    #8800cc
+  );
+  --geo-pattern: radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
     radial-gradient(rgba(0, 179, 255, 0.14) 1.5px, transparent 1.5px);
   --geo-pattern-size: 22px 22px, 22px 22px;
 }
@@ -260,7 +154,6 @@
 }
 
 [data-style="geocities"] button:not(.dump-fab, .chat-fab) {
-  border-radius: 0;
   border: 3px outset var(--color-border);
   box-shadow: none;
   font-weight: 700;
@@ -284,23 +177,10 @@
 [data-style="geocities"] .comment-submit-btn,
 [data-style="geocities"] .comment-cancel-btn,
 [data-style="geocities"] .search-bar-btn {
-  border-radius: 0;
   border: 3px outset var(--color-border);
   box-shadow: none;
 }
 
-/* In the light variant the resting text colour is dark, but on hover the
-   danger button fills with the dark --color-danger-hover. Force light text on
-   hover so the label stays legible. */
-@media (prefers-color-scheme: light) {
-  :root[data-style="geocities"]:not([data-color-scheme]) .btn-danger:hover {
-    color: #fff;
-  }
-}
-:root[data-style="geocities"][data-color-scheme="light"] .btn-danger:hover {
-  color: #fff;
-}
-
 /* The shared .vote-btn declares `background: transparent`, which leaves the
    chunky outset bevel see-through against the card. Give the resting state a
    solid raised-panel fill; the voted (--active) state keeps its accent
@@ -346,12 +226,10 @@
 
 /* ── Segmented controls ──────────────────────────────────────────── */
 [data-style="geocities"] .visibility-toggle {
-  border-radius: 0;
   border: 3px ridge var(--color-border);
 }
 
 [data-style="geocities"] .visibility-toggle button {
-  border-radius: 0;
   /* Zero the width (not just the style): the generic `button:active` rule flips
      border-style to `inset`, and a `none` border keeps its `medium` width — so
      on press a 3px border would reappear inside the toggle's own frame. */
@@ -366,7 +244,6 @@
 [data-style="geocities"] .notification-item,
 [data-style="geocities"] .user-result-item,
 [data-style="geocities"] .journal-card {
-  border-radius: 0;
   border: 3px ridge var(--color-border);
   box-shadow: 0 0 9px color-mix(in srgb, var(--color-border) 38%, transparent);
 }
@@ -379,7 +256,6 @@
    edge but lighten it: thin flat border, just a whisper of the same halo. */
 [data-style="geocities"] .comment-node-inner,
 [data-style="geocities"] .comment-top-form {
-  border-radius: 0;
   border: 2px solid var(--color-border-subtle);
   box-shadow: 0 0 6px var(--color-border-subtle);
 }
@@ -400,7 +276,6 @@
 }
 
 [data-style="geocities"] .app-header-user {
-  border-radius: 0;
   border: 3px outset var(--color-border);
 }
 
@@ -435,9 +310,6 @@
   background-color: var(--color-bg);
 }
 
-[data-style="geocities"] .search-bar-input {
-  border-radius: 0;
-}
 
 /* ── Modals — heavy ridged frame ─────────────────────────────────── */
 [data-style="geocities"] .modal-card,
@@ -446,7 +318,6 @@
 [data-style="geocities"] .user-list-popover,
 [data-style="geocities"] .mention-dropdown,
 [data-style="geocities"] .emoji-picker-float {
-  border-radius: 0;
   border: 3px ridge var(--color-border);
   box-shadow: 0 0 18px color-mix(in srgb, var(--color-border) 45%, transparent);
 }
@@ -462,7 +333,6 @@
 
 /* ── Rich content cards — keep brand borders, add neon hover glow ── */
 [data-style="geocities"] .rich-content-card {
-  border-radius: 0;
   border-width: 3px;
   border-style: ridge;
   box-shadow: 0 0 9px color-mix(in srgb, var(--color-border) 38%, transparent);
@@ -478,30 +348,15 @@
   box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 70%, transparent);
 }
 
-[data-style="geocities"] .rich-content-badge {
-  border-radius: 0;
-}
 
 /* ── Global player — neon console ────────────────────────────────── */
 [data-style="geocities"] .global-player {
-  border-radius: 0;
   border: 3px ridge var(--color-accent);
   box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 55%, transparent);
 }
 
-[data-style="geocities"] .global-player-iframe-wrap,
-[data-style="geocities"] .global-player-media-wrap,
-[data-style="geocities"] .global-player .audio-player,
-[data-style="geocities"] .global-player .video-player {
-  border-radius: 0;
-}
 
 /* Queue UI: square off the artwork and the stream progress bar. */
-[data-style="geocities"] .global-player-artwork,
-[data-style="geocities"] .audio-player-track--stream::before,
-[data-style="geocities"] .audio-player-track--stream .audio-player-fill {
-  border-radius: 0;
-}
 
 [data-style="geocities"] .global-player .audio-player-btn {
   color: var(--color-on-accent);
@@ -514,26 +369,10 @@
 
 /* ── File drop zone ──────────────────────────────────────────────── */
 [data-style="geocities"] .fdz {
-  border-radius: 0;
   border-style: dashed;
 }
 
 /* ── Pills / badges — squared, and the unread bits blink ─────────── */
-[data-style="geocities"] .notifications-unread-pill,
-[data-style="geocities"] .playlist-badge,
-[data-style="geocities"] .dump-card-private-badge,
-[data-style="geocities"] .notif-icon,
-[data-style="geocities"] .md code,
-[data-style="geocities"] .md pre,
-[data-style="geocities"] .error-card,
-[data-style="geocities"] .feed-tab,
-[data-style="geocities"] .category-chip,
-[data-style="geocities"] .category-editor,
-[data-style="geocities"] .category-editor-btn,
-[data-style="geocities"] .dump-card-category-chip,
-[data-style="geocities"] .profile-role-chip {
-  border-radius: 0;
-}
 
 /* The editor is one squared box; flatten its fields (geocities otherwise
    forces a sunken inset border on every input) and drop the soft glow. */
@@ -555,13 +394,11 @@
 }
 
 [data-style="geocities"] .notification-badge {
-  border-radius: 0;
   animation: geo-blink 1.1s step-start infinite;
 }
 
 [data-style="geocities"] .notif-dot,
 [data-style="geocities"] .unread-dot {
-  border-radius: 0;
   animation: geo-blink 1.3s step-start infinite;
 }
 
@@ -588,7 +425,6 @@
    chunky Win95 button bevel doesn't apply to menu rows. (The trigger reuses
    .feed-sort-btn and keeps the bevel, matching the sort tabs.) */
 [data-style="geocities"] .category-switcher-menu {
-  border-radius: 0;
   border: 3px ridge var(--color-border);
   box-shadow: 0 0 18px color-mix(in srgb, var(--color-border) 45%, transparent);
 }
@@ -596,3 +432,9 @@
   border: none !important;
   box-shadow: none !important;
 }
+
+/* Circles App.css draws with a literal 50% (not the radius scale). */
+[data-style="geocities"] .notif-icon,
+[data-style="geocities"] .notif-dot {
+  border-radius: 0;
+}
diff --git a/src/themes/nyt.css b/src/themes/nyt.css
index 330f0514..47be1055 100644
--- a/src/themes/nyt.css
+++ b/src/themes/nyt.css
@@ -7,133 +7,39 @@
    Dark scheme  → NYT night mode (near-black page, warm-grey ink).
    ══════════════════════════════════════════════════════════════════════ */
 
-/* ── Dark variant (default for this theme) ────────────────────────── */
+/* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
 :root[data-style="nyt"] {
-  --color-text: #e6e6e6;
-  --color-text-secondary: #ababab;
-  --color-text-muted: #8a8a8a;
-  --color-on-accent: #121212;
+  /* Square corners everywhere App.css uses the radius scale. */
+  --radius-xs: 0;
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-full: 0;
 
-  --color-bg: #121212; /* NYT night */
-  --color-surface: #1e1e1e;
-
-  --color-border: #3a3a3a;
-  --color-border-subtle: rgba(255, 255, 255, 0.12);
-
-  --color-accent: #ececec; /* monochrome: interactive = paper-on-ink */
-  --color-accent-hover: #ffffff;
-
-  --color-link: #ececec;
-  --color-link-hover: #ffffff;
-
-  --color-danger: #ff6b6b;
-  --color-danger-bg: #2a1414;
-  --color-danger-hover: #ff9a9a;
-
-  --color-success: #6cc070;
-  --color-success-bg: #122a14;
-  --color-success-hover: #95d699;
-
-  --color-overlay: rgba(0, 0, 0, 0.6);
-  --color-header-user-bg: rgba(255, 255, 255, 0.06);
-  --color-header-user-bg-hover: rgba(255, 255, 255, 0.12);
-
-  --color-option-bg: #181818;
-  --color-option-border: #3a3a3a;
-}
-
-/* ── Light via system preference (auto color-scheme) ──────────────── */
-@media (prefers-color-scheme: light) {
-  :root[data-style="nyt"]:not([data-color-scheme]) {
-    --color-text: #121212; /* ink */
-    --color-text-secondary: #5a5a5a;
-    --color-text-muted: #767676; /* NYT timestamp grey */
-
-    --color-on-accent: #ffffff;
-
-    --color-bg: #ffffff; /* white page — content sits directly on it */
-    --color-surface: #ffffff; /* paper */
-
-    --color-border: #e2e2e2; /* hairline rule */
-    --color-border-subtle: rgba(0, 0, 0, 0.08);
-
-    --color-accent: #121212; /* monochrome: interactive = ink-on-paper */
-    --color-accent-hover: #000000;
-
-    --color-link: #1a1a1a;
-    --color-link-hover: #000000;
-
-    --color-danger: #b10000;
-    --color-danger-bg: #fdecec;
-    --color-danger-hover: #8a0000;
-
-    --color-success: #1a7f37;
-    --color-success-bg: #e6f4ea;
-    --color-success-hover: #136a2c;
-
-    --color-overlay: rgba(0, 0, 0, 0.4);
-    --color-header-user-bg: rgba(0, 0, 0, 0.05);
-    --color-header-user-bg-hover: rgba(0, 0, 0, 0.09);
-
-    --color-option-bg: #f2f2f2;
-    --color-option-border: #e2e2e2;
-  }
-}
-
-/* ── Manual dark override ─────────────────────────────────────────── */
-:root[data-style="nyt"][data-color-scheme="dark"] {
-  color-scheme: dark;
-  --color-text: #e6e6e6;
-  --color-text-secondary: #ababab;
-  --color-text-muted: #8a8a8a;
-  --color-on-accent: #121212;
-  --color-bg: #121212;
-  --color-surface: #1e1e1e;
-  --color-border: #3a3a3a;
-  --color-border-subtle: rgba(255, 255, 255, 0.12);
-  --color-accent: #ececec;
-  --color-accent-hover: #ffffff;
-  --color-link: #ececec;
-  --color-link-hover: #ffffff;
-  --color-danger: #ff6b6b;
-  --color-danger-bg: #2a1414;
-  --color-danger-hover: #ff9a9a;
-  --color-success: #6cc070;
-  --color-success-bg: #122a14;
-  --color-success-hover: #95d699;
-  --color-overlay: rgba(0, 0, 0, 0.6);
-  --color-header-user-bg: rgba(255, 255, 255, 0.06);
-  --color-header-user-bg-hover: rgba(255, 255, 255, 0.12);
-  --color-option-bg: #181818;
-  --color-option-border: #3a3a3a;
-}
-
-/* ── Manual light override ────────────────────────────────────────── */
-:root[data-style="nyt"][data-color-scheme="light"] {
-  color-scheme: light;
-  --color-text: #121212;
-  --color-text-secondary: #5a5a5a;
-  --color-text-muted: #767676;
-  --color-on-accent: #ffffff;
-  --color-bg: #ffffff;
-  --color-surface: #ffffff;
-  --color-border: #e2e2e2;
-  --color-border-subtle: rgba(0, 0, 0, 0.08);
-  --color-accent: #121212;
-  --color-accent-hover: #000000;
-  --color-link: #1a1a1a;
-  --color-link-hover: #000000;
-  --color-danger: #b10000;
-  --color-danger-bg: #fdecec;
-  --color-danger-hover: #8a0000;
-  --color-success: #1a7f37;
-  --color-success-bg: #e6f4ea;
-  --color-success-hover: #136a2c;
-  --color-overlay: rgba(0, 0, 0, 0.4);
-  --color-header-user-bg: rgba(0, 0, 0, 0.05);
-  --color-header-user-bg-hover: rgba(0, 0, 0, 0.09);
-  --color-option-bg: #f2f2f2;
-  --color-option-border: #e2e2e2;
+  --color-text: light-dark(#121212, #e6e6e6);
+  --color-text-secondary: light-dark(#5a5a5a, #ababab);
+  --color-text-muted: light-dark(#767676, #8a8a8a);
+  --color-on-accent: light-dark(#ffffff, #121212);
+  --color-bg: light-dark(#ffffff, #121212);
+  --color-surface: light-dark(#ffffff, #1e1e1e);
+  --color-border: light-dark(#e2e2e2, #3a3a3a);
+  --color-border-subtle: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
+  --color-accent: light-dark(#121212, #ececec);
+  --color-accent-hover: light-dark(#000000, #ffffff);
+  --color-link: light-dark(#1a1a1a, #ececec);
+  --color-link-hover: light-dark(#000000, #ffffff);
+  --color-danger: light-dark(#b10000, #ff6b6b);
+  --color-danger-bg: light-dark(#fdecec, #2a1414);
+  --color-danger-hover: light-dark(#8a0000, #ff9a9a);
+  --color-success: light-dark(#1a7f37, #6cc070);
+  --color-success-bg: light-dark(#e6f4ea, #122a14);
+  --color-success-hover: light-dark(#136a2c, #95d699);
+  --color-overlay: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
+  --color-header-user-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.06));
+  --color-header-user-bg-hover: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.12));
+  --color-option-bg: light-dark(#f2f2f2, #181818);
+  --color-option-border: light-dark(#e2e2e2, #3a3a3a);
 }
 
 /* ══════════════════════════════════════════════════════════════════════
@@ -149,42 +55,6 @@
   line-height: 1.5;
 }
 
-/* Sharp, rectilinear corners throughout — newsprint has no rounding. */
-[data-style="nyt"] button:not(.dump-fab, .chat-fab),
-[data-style="nyt"] .dump-card,
-[data-style="nyt"] .playlist-card,
-[data-style="nyt"] .journal-card,
-[data-style="nyt"] .dump-post-header,
-[data-style="nyt"] .auth-card,
-[data-style="nyt"] .notification-item,
-[data-style="nyt"] .user-result-item,
-[data-style="nyt"] .comment-node-inner,
-[data-style="nyt"] .comment-top-form,
-[data-style="nyt"] .rich-content-card,
-[data-style="nyt"] .rich-content-badge,
-[data-style="nyt"] .modal-card,
-[data-style="nyt"] .confirm-modal,
-[data-style="nyt"] .user-menu-dropdown,
-[data-style="nyt"] .user-list-popover,
-[data-style="nyt"] .global-player,
-[data-style="nyt"] .global-player-media-wrap,
-[data-style="nyt"] .global-player-iframe-wrap,
-[data-style="nyt"] .global-player-artwork,
-[data-style="nyt"] .audio-player-track--stream::before,
-[data-style="nyt"] .audio-player-track--stream .audio-player-fill,
-[data-style="nyt"] .fdz,
-[data-style="nyt"] .visibility-toggle,
-[data-style="nyt"] .feed-tab,
-[data-style="nyt"] .md code,
-[data-style="nyt"] .md pre,
-[data-style="nyt"]
-  input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not(
-    [type="radio"]
-  ),
-[data-style="nyt"] textarea {
-  border-radius: 0;
-}
-
 /* This theme squares everything off — opt the FAB into a square too (it keeps
    its animations; only the corners change). */
 [data-style="nyt"] .dump-fab,
@@ -192,18 +62,6 @@
   --fab-radius: 0;
 }
 
-/* In the light variant the resting text colour is dark, but on hover the
-   danger button fills with the dark --color-danger-hover. Force light text on
-   hover so the label stays legible. */
-@media (prefers-color-scheme: light) {
-  :root[data-style="nyt"]:not([data-color-scheme]) .btn-danger:hover {
-    color: #fff;
-  }
-}
-:root[data-style="nyt"][data-color-scheme="light"] .btn-danger:hover {
-  color: #fff;
-}
-
 /* ── Headlines — display serif ───────────────────────────────────── */
 [data-style="nyt"] h1,
 [data-style="nyt"] .app-header-brand,
@@ -331,7 +189,6 @@
   background: transparent;
   border: none;
   border-bottom: 1px solid var(--color-border);
-  border-radius: 0;
   box-shadow: none;
 }
 
@@ -340,7 +197,6 @@
 [data-style="nyt"] .dump-rich-content {
   background: transparent;
   border: none;
-  border-radius: 0;
   box-shadow: none;
 }
 
@@ -349,7 +205,6 @@
   border: none;
   border-left: 3px solid transparent;
   border-bottom: 1px solid var(--color-border);
-  border-radius: 0;
   box-shadow: none;
 }
 
@@ -448,9 +303,6 @@
   border-bottom: 1px solid var(--color-border);
 }
 
-[data-style="nyt"] .app-header-user {
-  border-radius: 0;
-}
 
 /* ── Primary button — inverted ink-on-paper (auto-flips per scheme) ─ */
 [data-style="nyt"] .btn-primary {
@@ -467,14 +319,6 @@
 }
 
 /* Secondary / outline buttons — plain hairline box */
-[data-style="nyt"] .btn-secondary,
-[data-style="nyt"] .btn-border,
-[data-style="nyt"] .btn-add-playlist,
-[data-style="nyt"] .vote-btn,
-[data-style="nyt"] .feed-sort-btn,
-[data-style="nyt"] .follow-btn {
-  border-radius: 0;
-}
 
 /* ── Inputs — clean field, ink focus ─────────────────────────────── */
 [data-style="nyt"] .form input:focus,
@@ -523,7 +367,6 @@
 [data-style="nyt"] .feed-sort-btn {
   border: none;
   border-bottom: 2px solid transparent;
-  border-radius: 0;
   background: none;
   color: var(--color-text-muted);
   padding: 0.2rem 0.15rem;
@@ -548,17 +391,10 @@
 [data-style="nyt"] .btn-add-playlist,
 [data-style="nyt"] .invite-btn,
 [data-style="nyt"] .profile-role-chip {
-  border-radius: 0;
   border: none;
 }
 
 /* Category management chips / inline editor: squared, no accent glow. */
-[data-style="nyt"] .category-chip,
-[data-style="nyt"] .category-editor,
-[data-style="nyt"] .category-editor-btn,
-[data-style="nyt"] .dump-card-category-chip {
-  border-radius: 0;
-}
 
 [data-style="nyt"] .category-editor {
   box-shadow: none;
@@ -617,7 +453,6 @@
    fixed, clipped frame, the editorial way. ───────────────────────── */
 [data-style="nyt"] .dump-card-preview,
 [data-style="nyt"] .playlist-card-preview {
-  border-radius: 0;
   transition: none;
 }
 [data-style="nyt"] .dump-card-inner:hover .dump-card-preview,
@@ -638,7 +473,6 @@
 /* Match the other nyt popovers (1px rule + editorial shadow, no rounding).
    Option rows inherit the global square-off, so no per-row rule is needed. */
 [data-style="nyt"] .category-switcher-menu {
-  border-radius: 0;
   border: 1px solid var(--color-border);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
 }