refactor(css): WP1.1 sprints 1+2 — font-system-ui extraction + dead Bootstrap :root purge

[pftg]

Summary

First two sprints of Project 2509 CSS Migration, WP1.1 (CSS Variables Foundation). Total: −700 lines of CSS duplication/dead code (+44/−744), 21 commits, zero visual regressions on both platforms.

Sprint 1 — wire css-variables foundation + extract --font-system-ui (12 commits)

Eliminates all exact-match literal system-ui font stacks from the critical CSS layer: 25 byte-identical stacks replaced with var(--font-system-ui), and the pre-existing foundations/css-variables.css wired (via @import, same pattern as critical/base.css) into the 3 bundles that never loaded it. This fixed a real defect: /careers/ had 4 var(--font-system-ui) usages resolving to nothing. Variant stacks (short system-ui, Bootstrap-reboot) deliberately untouched — converting them would be value changes.

Sprint 2 — delete the dead Bootstrap :root block (9 commits)

An identical 35-line Bootstrap :root block (--blue … --font-family-monospace, 28 vars) was copy-pasted in 8 critical files. Three independent checks (scope agent, reviewer, lead) confirmed zero var() consumers of any of those 28 variables anywhere in live source — so the copies were deleted outright (280 lines), not relocated. The vendor copy in base-4.min.css is untouched. Post-sweep: zero :root blocks remain in critical/; compiled bundles verified.

Safety protocol (every commit)

• bin/rake test:critical (macOS): 46 runs / 84 screenshots / 0 diffs — per commit
• bin/dtest (Linux/Docker via Colima): 46 runs / 0 failures — per commit
• Independent reviewer agent verified every diff hunk-by-hunk (21/21 approved, several claims corrected/strengthened along the way)
• Chrome DevTools spot-checks on /careers/, /clients/agent-inbox/, /use-cases/emergency-cto-leadership/ (pages without automated coverage): fonts resolve, console clean, rendering correct

Follow-ups queued (not in this PR)

1. use-cases-critical.css is orphaned — no template loads it; wire in or delete.
2. Stray mid-file @charset in single-services.css, single-use-cases.css, fl-common-modules.css (pre-existing concat leftovers; invalid per spec, ignored by browsers).
3. skin-65eda28877e04.css still carries 8+ literal font-stack copies — next extraction target.
4. WP1.1 remaining: reconcile --color-primary/--color-text token extraction with the existing variables/colors.css naming.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Standardized typography across critical pages by switching to a shared system-font CSS variable.
  • Reduced duplicated critical CSS by removing inlined variable blocks and reusing shared foundation variables across key page templates.
  • Updated accent/ruby styling to use a shared color variable (including navigation buttons and course/blog elements).
  • Improved consistency with added/reset box-sizing and minor button/typography tweaks.
• Documentation
  • Updated the CSS Variables task tracker and release update log with sprint progress, validation notes, and follow-ups.

[coderabbitai]

📝 Walkthrough

Walkthrough

CSS foundations now provide shared font and Ruby color tokens. Critical CSS consumes the font token and removes duplicated Bootstrap variables, while page bundles include the foundation stylesheet and migration tracking records updated sprint status and validation details.

Changes

CSS variable migration

Layer / File(s)	Summary
Foundation tokens and bundle wiring themes/beaver/assets/css/foundations/css-variables.css, themes/beaver/layouts/*.html	Adds --color-ruby and includes the shared foundation stylesheet in page and navigation bundles.
Critical font variable migration themes/beaver/assets/css/critical/*.css, themes/beaver/assets/css/skin-65eda28877e04.css	Replaces hard-coded system font stacks with var(--font-system-ui) and adds required foundation imports.
Critical stylesheet cleanup themes/beaver/assets/css/critical/*.css, themes/beaver/assets/css/{586,services-layout}.css	Removes duplicated Bootstrap-style :root blocks and stray @charset directives while retaining or normalizing reset rules.
Color token rollout and migration tracking themes/beaver/assets/css/{navigation,single-post,style}.css, docs/projects/2509-css-migration/TASK-TRACKER.md	Replaces selected hard-coded Ruby colors, documents literal-preservation cases, and updates WP1.1 sprint status and validation notes.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

• jetthoughts/jetthoughts.github.io#76: Updates similar CSS font-stack declarations.
• jetthoughts/jetthoughts.github.io#295: Overlaps on CSS variable foundation and typography consumers.

Suggested reviewers: AucT, dgorodnichy

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title captures the main refactor: extracting font-system-ui and purging duplicated Bootstrap :root blocks, and is specific enough despite omitting follow-up work.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch emdash/early-readers-greet-f50x3

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

themes/beaver/assets/css/critical/single-services.css (1)

1474-1477: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Use var(--font-system-ui) for body
body still hardcodes a shorter stack than --font-system-ui and misses the Noto/Liberation/emoji fallbacks. Switching this rule to the shared token keeps the typography consistent with the rest of the theme.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@themes/beaver/assets/css/critical/single-services.css` around lines 1474 -
1477, Update the body rule to use var(--font-system-ui) for font-family instead
of the hardcoded stack, preserving the shared theme typography token and its
complete fallback list.

🧹 Nitpick comments (1)

themes/beaver/assets/css/critical/single-clients.css (1)

1379-1384: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Box-sizing selector notation inconsistent with sibling files.

This file uses *, ::after, ::before while single-services.css and single-use-cases.css use *, *::before, *::after. Both are functionally equivalent, but normalizing the notation across files in the same PR improves consistency.

♻️ Optional: align selector notation with sibling files

 *,
-::after,
-::before {
+*::before,
+*::after {
   box-sizing: border-box;
 }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@themes/beaver/assets/css/critical/single-clients.css` around lines 1379 -
1384, Normalize the box-sizing selectors in the affected rule to match the
sibling stylesheet convention: use the universal-element pseudo-element form for
both ::before and ::after, while preserving the existing box-sizing declaration.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@themes/beaver/assets/css/critical/single-services.css`:
- Around line 1474-1477: Update the body rule to use var(--font-system-ui) for
font-family instead of the hardcoded stack, preserving the shared theme
typography token and its complete fallback list.

---

Nitpick comments:
In `@themes/beaver/assets/css/critical/single-clients.css`:
- Around line 1379-1384: Normalize the box-sizing selectors in the affected rule
to match the sibling stylesheet convention: use the universal-element
pseudo-element form for both ::before and ::after, while preserving the existing
box-sizing declaration.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ad738289-5630-4090-9b30-771066a51999

📥 Commits

Reviewing files that changed from the base of the PR and between fbb0437 and 4139306.

📒 Files selected for processing (12)

• docs/projects/2509-css-migration/TASK-TRACKER.md
• themes/beaver/assets/css/critical/about-us-critical.css
• themes/beaver/assets/css/critical/careers-critical.css
• themes/beaver/assets/css/critical/fl-common-modules.css
• themes/beaver/assets/css/critical/free-consultation-critical.css
• themes/beaver/assets/css/critical/homepage-critical.css
• themes/beaver/assets/css/critical/services-critical.css
• themes/beaver/assets/css/critical/single-careers.css
• themes/beaver/assets/css/critical/single-clients.css
• themes/beaver/assets/css/critical/single-services.css
• themes/beaver/assets/css/critical/single-use-cases.css
• themes/beaver/assets/css/critical/use-cases-critical.css

💤 Files with no reviewable changes (2)

• themes/beaver/assets/css/critical/about-us-critical.css
• themes/beaver/assets/css/critical/fl-common-modules.css

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@themes/beaver/assets/css/style.css`:
- Line 323: Update every bundle that consumes themes/beaver/assets/css/style.css
to load css/foundations/css-variables.css before style.css, ensuring variables
such as --color-ruby are defined before use. Apply this ordering consistently
across all bundle entry points.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 56f8abef-7645-40b4-b734-25441c8f13a3

📥 Commits

Reviewing files that changed from the base of the PR and between 4139306 and 24439e3.

📒 Files selected for processing (17)

• docs/projects/2509-css-migration/TASK-TRACKER.md
• themes/beaver/assets/css/586.css
• themes/beaver/assets/css/critical/fl-common-modules.css
• themes/beaver/assets/css/critical/single-services.css
• themes/beaver/assets/css/critical/single-use-cases.css
• themes/beaver/assets/css/critical/use-cases-critical.css
• themes/beaver/assets/css/foundations/css-variables.css
• themes/beaver/assets/css/navigation.css
• themes/beaver/assets/css/services-layout.css
• themes/beaver/assets/css/single-post.css
• themes/beaver/assets/css/skin-65eda28877e04.css
• themes/beaver/assets/css/style.css
• themes/beaver/layouts/404.html
• themes/beaver/layouts/baseof.html
• themes/beaver/layouts/course/single.html
• themes/beaver/layouts/list.html
• themes/beaver/layouts/single.html

💤 Files with no reviewable changes (6)

• themes/beaver/assets/css/586.css
• themes/beaver/assets/css/critical/use-cases-critical.css
• themes/beaver/assets/css/services-layout.css
• themes/beaver/assets/css/critical/fl-common-modules.css
• themes/beaver/assets/css/critical/single-use-cases.css
• themes/beaver/assets/css/critical/single-services.css

[coderabbitai]

🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Verify css-variables.css is bundled before style.css in all consuming templates.
rg -n 'style\.css' themes/beaver/layouts/ --type=html -C5
rg -n 'css-variables' themes/beaver/layouts/ --type=html -C5

Repository: jetthoughts/jetthoughts.github.io

Length of output: 22002

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Inspect the shared CSS bundling path and the layouts that call it.
files=(
  "themes/beaver/layouts/partials/assets/css-processor.html"
  "themes/beaver/layouts/_default/baseof.html"
  "themes/beaver/layouts/index.html"
  "themes/beaver/layouts/list.html"
  "themes/beaver/layouts/single.html"
  "themes/beaver/layouts/blog/list.html"
  "themes/beaver/layouts/services/single.html"
  "themes/beaver/layouts/page/single.html"
  "themes/beaver/layouts/page/services.html"
  "themes/beaver/layouts/page/use-cases.html"
  "themes/beaver/layouts/page/service-template.html"
  "themes/beaver/layouts/clients/single.html"
  "themes/beaver/layouts/course/single.html"
  "themes/beaver/layouts/use-cases/single.html"
  "themes/beaver/layouts/page/clients.html"
)

for f in "${files[@]}"; do
  if [ -f "$f" ]; then
    echo "=== $f ==="
    cat -n "$f" | sed -n '1,220p'
    echo
  fi
done

Repository: jetthoughts/jetthoughts.github.io

Length of output: 50390

---

Load css-variables.css before style.css in every bundle
Several bundles still include style.css without css/foundations/css-variables.css first, so var(--color-ruby) can be undefined on those pages. Add the variables sheet to each consuming bundle before style.css.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@themes/beaver/assets/css/style.css` at line 323, Update every bundle that
consumes themes/beaver/assets/css/style.css to load
css/foundations/css-variables.css before style.css, ensuring variables such as
--color-ruby are defined before use. Apply this ordering consistently across all
bundle entry points.