v3: modernized smooth theme — surface ladder, hairline borders, soft tabs, calmer accents, focus ring, AA contrast

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/tokens.css

@@ -10,6 +10,12 @@
      palette block covers auto, forced-light and forced-dark. */
   color-scheme: light dark;
 
+  font-family: var(--font-body);
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.5;
+
   /* ── Space (4px grid) ── */
   --space-1: 0.25rem;
   --space-2: 0.5rem;
@@ -56,6 +62,17 @@
   --font-display: var(--font-body);
   --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
 
+  /* ── Service brand colors ──
+     Fixed across themes and schemes. `on-brand` is the foreground for text
+     sitting on any of them — also fixed, so contrast never flips. */
+  --color-youtube: #c00;
+  --color-youtube-hover: #f00;
+  --color-bandcamp: #1da0c3;
+  --color-bandcamp-hover: #25c8f0;
+  --color-soundcloud: #f50;
+  --color-soundcloud-hover: #f73;
+  --color-on-brand: #fff;
+
   /* ── Elevation ── */
   --shadow-1: 0 1px 2px rgb(0 0 0 / 0.12);
   --shadow-2: 0 4px 16px rgb(0 0 0 / 0.2);
@@ -78,25 +95,42 @@
   --z-popover: 1100;
   --z-toast: 9999;
 
+  /* ── Borders ── */
+  --border-width: 2px;
+
   /* ── Derived colors ──
-     Defaults computed from each theme's base palette, so every theme gets
-     the full semantic set; a theme overrides any of these when the derived
-     value isn't right for it. */
-  --color-surface-raised: color-mix(
-    in srgb,
-    var(--color-surface) 94%,
-    var(--color-text)
-  );
-  --color-surface-sunken: color-mix(
-    in srgb,
-    var(--color-bg) 96%,
-    var(--color-text)
-  );
+     Defaults reproduce the flat two-level (bg / surface) look; a theme that
+     wants more depth sets its own raised/sunken tiers. */
+  --color-surface-raised: var(--color-surface);
+  --color-surface-sunken: var(--color-bg);
   --color-accent-soft: color-mix(in srgb, var(--color-accent) 14%, transparent);
   --color-focus-ring: color-mix(in srgb, var(--color-accent) 45%, transparent);
   --color-warning: #d4a017;
   --color-on-danger: #fff;
 
+  /* ── Component skins ──
+     Knobs for the handful of treatments themes disagree on. */
+  --header-bg: var(--color-surface);
+  --card-shadow: 0 0 #0000;
+  --panel-ring: 0 0 #0000;
+  --card-hover-border: var(--color-accent);
+  --input-focus-bg: color-mix(
+    in srgb,
+    var(--color-accent) 4%,
+    var(--color-surface-sunken) 96%
+  );
+  --overlay-filter: none;
+  --modal-border: transparent;
+  --tab-border: var(--color-border);
+  --tab-active-bg: var(--color-accent);
+  --tab-active-fg: var(--color-on-accent);
+  --tab-text-transform: uppercase;
+  --tab-tracking: 0.04em;
+  --btn-primary-shadow: 0 2px 8px
+    color-mix(in srgb, var(--color-accent) 40%, transparent);
+  --btn-primary-shadow-hover: 0 4px 14px
+    color-mix(in srgb, var(--color-accent) 50%, transparent);
+
   /* Legacy names still referenced by a few rules. */
   --color-muted: var(--color-text-muted);
   --color-error: var(--color-danger);