[Phase 02] CSS token layer + global styles

[ashleyshaw]

Phase 02 — CSS token layer + global styles

Defines all site-specific CSS custom properties on top of the design system base,
establishes global layout rules (.wrap, .section, breakpoints), and sets typography
defaults. This is the foundation every component relies on.

Deliverables

• src/styles/site-tokens.css — surface tokens (--panel, --panel-2, --hair), dark overrides
• src/styles/global.css — .wrap, .wrap-prose, .section, reset, typography, button classes
• Both files imported in BaseLayout.astro
• Light + dark mode both render correctly (no hardcoded colours)
• Fluid clamp() values for all spacing + typography

Spec: AWESOME_GITHUB_THEME_TOKENS_SPEC.md, AWESOME_GITHUB_HOMEPAGE_SPEC.md §1

[linear-code]

LS-945

LS-1086

[github-actions]

⚠️ This issue does not follow a required issue template.

Missing required section(s): Definition of Ready (DoR), Definition of Done (DoD)

The issue will remain open and flagged until the body is corrected.
Please update the issue with one of the official templates:

• https://github.com/lightspeedwp/.github/issues/new/choose

If this was opened by automation, update the automation to preserve the template sections before creating the issue.

[ashleyshaw]

Phase 02 complete. PR #853 opened. Token smoke-test passed in both light and dark.

Build result: npm run build exits 0 — 220 pages built in 3.79s.

Changes committed:

• site-tokens.css — --panel, --panel-2, --hair, shadows, radii, font stacks, transitions
• global.css — .wrap (1320px), .wrap-prose (820px), .section, button system, burger breakpoints, .md prose utilities
• BaseLayout.astro — correct CSS import order + localStorage key fixed to ag-theme

---

Generated by Claude Code