redraw the desk as cartoon skeuomorphism: CSS-only materials (no textures), light cream desk, per-item hues, cork board, receipt, scoreboard

src/app/globals.css

@@ -37,15 +37,20 @@
   --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-/* Beats page.css's :root when the editorial theme is active. */
+/* Beats page.css's :root when the web theme is active. The desk is a light,
+   colourful, cartoon-skeuomorphic surface — the dark gruvbox values in :root
+   are only the fallback for the desktop mode. */
 html[data-theme="web"] {
-  color-scheme: dark;
-  --accent: #fe8019;
-  --accent2: #d65d0e;
-  --accent3: #fabd2f;
-  --green: #b8bb26;
-  --red: #fb4934;
-  --gray: #a89984;
+  color-scheme: light;
+  --bg: #f7e7c6;
+  --bg-raised: #fffdf6;
+  --bg-well: #eed9b0;
+  --accent: #f4823a;
+  --accent2: #d4611c;
+  --accent3: #f2c14e;
+  --green: #58bd72;
+  --red: #ea6f6a;
+  --gray: #7f7768;
 }
 
 @theme inline {
@@ -71,7 +76,7 @@ html[data-theme="web"] {
 }
 
 html[data-theme="web"] ::selection {
-  background: rgba(254, 128, 25, 0.28);
+  background: rgba(244, 130, 58, 0.3);
   color: var(--ink);
 }
 
@@ -88,12 +93,12 @@ html[data-theme="web"] ::-webkit-scrollbar-track {
   background: var(--bg-well);
 }
 html[data-theme="web"] ::-webkit-scrollbar-thumb {
-  background: #3c3836;
+  background: #d9c49b;
   border: 3px solid var(--bg-well);
   border-radius: 99px;
 }
 html[data-theme="web"] ::-webkit-scrollbar-thumb:hover {
-  background: #504945;
+  background: #c9b184;
 }
 
 /* Phones never get the desktop-mode button. */