theme.json

Phase 2: add a v3 theme.json design-token foundation, ported from the theme's
real tokens in style.css/styles.scss (not the srh reference's identity).

- Palette (12): maroon link #67000a, link-hover #2a6496, terminal green #34f743,
  slate/slate-deep page bgs, base/surface/ink/contrast/coral/meta/border.
- Typography: 7-step scale (x-small .75rem -> display 3.75rem); 4 families incl.
  Computer Modern (fontFace -> existing fonts/cmun*), Georgia, Helvetica Neue, Courier.
- Layout: contentSize 1170 / wideSize 1280. Element styles: h1-h6 scale, link
  colors, #000 headings, button.

Theme stays classic: front end remains v4-style.min.css-driven (global styles
inject via low-specificity :where()); theme.json powers the editor + Phase-3
blocks. useRootPaddingAwareAlignments:false; front-page.php (no wp_head) unaffected.
Verified valid + /, /about/, /studio/ all 200.

_claude/notes/upgrade-plan.md

@@ -75,8 +75,20 @@ character of the site.
 - **Reversibility:** nothing deleted — `scripts.js`/gulp/`v4-*` stay on disk + in git; enqueues switch only after page verification.
 
 ### Phase 2 — theme.json foundation
-- [ ] `theme.json` v3: layout, color palette, typography, spacing, element styles
-- [ ] Port design tokens out of `style.css`/`styles.scss`
+- [x] `theme.json` v3 (2026-06-17): layout (contentSize 1170 / wideSize 1280), 12-color
+  palette (daw's real tokens — maroon link `#67000a`, terminal green `#34f743`, slate page
+  bgs, ink/contrast), 7-size type scale, 4 fontFamilies (Computer Modern w/ `fontFace` →
+  existing `fonts/cmun*`, Georgia, Helvetica Neue, Courier), element styles (h1–h6 scale,
+  link maroon→blue hover, headings `#000`, button). Tokens mined from `style.css`/`styles.scss`.
+- **Classic-theme caveat:** theme.json is active but the front end is still `style.css`/
+  `v4-style.min.css`-driven. WP injects global-styles via low-specificity `:where()`, so the
+  built CSS wins on conflicts — theme.json today mainly powers the **block editor** + the
+  Phase-3 block templates. `useRootPaddingAwareAlignments:false` (no body-padding injection);
+  `front-page.php` skips `wp_head()` so the bespoke homepage is unaffected. Verified `/`,
+  `/about/`, `/studio/` all 200 with global styles emitting.
+- **Deferred to Phase 3:** fluid typography (off for predictability now), gradients/duotone,
+  trimming the duplicate `@font-face` (theme.json now emits CM; `style.css` still does too —
+  reconcile when `style.css` gets pared down).
 
 ### Phase 3 — Block templates + parts
 - [ ] `templates/`: index, single, archive, page, home, search, 404, category, tag

theme.json

@@ -0,0 +1,134 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/theme.json",
+  "version": 3,
+  "settings": {
+    "appearanceTools": true,
+    "useRootPaddingAwareAlignments": false,
+    "layout": {
+      "contentSize": "1170px",
+      "wideSize": "1280px"
+    },
+    "color": {
+      "defaultPalette": false,
+      "defaultGradients": false,
+      "defaultDuotone": false,
+      "custom": true,
+      "palette": [
+        { "name": "Base", "slug": "base", "color": "#ffffff" },
+        { "name": "Surface", "slug": "surface", "color": "#f1f1f1" },
+        { "name": "Ink", "slug": "ink", "color": "#232323" },
+        { "name": "Contrast", "slug": "contrast", "color": "#000000" },
+        { "name": "Link", "slug": "link", "color": "#67000a" },
+        { "name": "Link Hover", "slug": "link-hover", "color": "#2a6496" },
+        { "name": "Coral", "slug": "coral", "color": "#ff4b33" },
+        { "name": "Slate", "slug": "slate", "color": "#616674" },
+        { "name": "Slate Deep", "slug": "slate-deep", "color": "#484c57" },
+        { "name": "Terminal", "slug": "terminal", "color": "#34f743" },
+        { "name": "Meta", "slug": "meta", "color": "#777777" },
+        { "name": "Border", "slug": "border", "color": "#cecece" }
+      ]
+    },
+    "typography": {
+      "defaultFontSizes": false,
+      "fluid": false,
+      "fontSizes": [
+        { "name": "Extra Small", "slug": "x-small", "size": "0.75rem" },
+        { "name": "Small", "slug": "small", "size": "0.875rem" },
+        { "name": "Medium", "slug": "medium", "size": "1rem" },
+        { "name": "Large", "slug": "large", "size": "1.25rem" },
+        { "name": "Extra Large", "slug": "x-large", "size": "1.625rem" },
+        { "name": "Extra Extra Large", "slug": "xx-large", "size": "2rem" },
+        { "name": "Display", "slug": "display", "size": "3.75rem" }
+      ],
+      "fontFamilies": [
+        {
+          "name": "Computer Modern",
+          "slug": "computer-modern",
+          "fontFamily": "\"Computer Modern\", Georgia, serif",
+          "fontFace": [
+            {
+              "fontFamily": "Computer Modern",
+              "fontWeight": "400",
+              "fontStyle": "normal",
+              "fontDisplay": "swap",
+              "src": [ "file:./fonts/cmunrm.woff", "file:./fonts/cmunrm.ttf" ]
+            },
+            {
+              "fontFamily": "Computer Modern",
+              "fontWeight": "700",
+              "fontStyle": "normal",
+              "fontDisplay": "swap",
+              "src": [ "file:./fonts/cmunbx.woff", "file:./fonts/cmunbx.ttf" ]
+            },
+            {
+              "fontFamily": "Computer Modern",
+              "fontWeight": "400",
+              "fontStyle": "italic",
+              "fontDisplay": "swap",
+              "src": [ "file:./fonts/cmunsl.woff", "file:./fonts/cmunsl.ttf" ]
+            }
+          ]
+        },
+        {
+          "name": "Georgia",
+          "slug": "georgia",
+          "fontFamily": "Georgia, \"Times New Roman\", \"Bitstream Charter\", Times, serif"
+        },
+        {
+          "name": "Helvetica Neue",
+          "slug": "helvetica-neue",
+          "fontFamily": "\"Helvetica Neue\", Helvetica, Arial, sans-serif"
+        },
+        {
+          "name": "Courier",
+          "slug": "courier",
+          "fontFamily": "\"Courier New\", Courier, monospace"
+        }
+      ]
+    },
+    "spacing": {
+      "units": [ "px", "em", "rem", "vh", "vw", "%" ]
+    }
+  },
+  "styles": {
+    "color": {
+      "text": "var:preset|color|ink"
+    },
+    "typography": {
+      "fontFamily": "var:preset|font-family|helvetica-neue",
+      "fontSize": "var:preset|font-size|medium",
+      "fontWeight": "400",
+      "lineHeight": "1.45"
+    },
+    "elements": {
+      "heading": {
+        "color": { "text": "var:preset|color|contrast" },
+        "typography": { "fontWeight": "700", "lineHeight": "1.3" }
+      },
+      "h1": { "typography": { "fontSize": "var:preset|font-size|xx-large" } },
+      "h2": { "typography": { "fontSize": "var:preset|font-size|x-large" } },
+      "h3": { "typography": { "fontSize": "var:preset|font-size|large" } },
+      "h4": { "typography": { "fontSize": "var:preset|font-size|medium" } },
+      "h5": { "typography": { "fontSize": "var:preset|font-size|small", "letterSpacing": "0.5px" } },
+      "h6": {
+        "typography": {
+          "fontSize": "var:preset|font-size|x-small",
+          "letterSpacing": "1.4px",
+          "textTransform": "uppercase"
+        }
+      },
+      "link": {
+        "color": { "text": "var:preset|color|link" },
+        ":hover": { "color": { "text": "var:preset|color|link-hover" } }
+      },
+      "button": {
+        "color": {
+          "background": "var:preset|color|link",
+          "text": "var:preset|color|base"
+        },
+        "border": { "radius": "4px" },
+        "typography": { "fontWeight": "700" }
+      }
+    }
+  }
+}