# PHASE 03: DESIGN SYSTEM AND BASE STYLES

Read `docs/04-DESIGN-SYSTEM.md` in full.

## Scope

Tokens, base styles, the component library as CSS, and a preview page. No page templates yet.

## Build

1. `assets/src/scss/abstracts/_tokens.scss`: the full `:root` block from the design system doc, verbatim. No invented values.
2. `abstracts/_mixins.scss` and `_breakpoints.scss`: a `respond-to()` mixin using the six breakpoints. Every media query in the project goes through it.
3. `base/`: reset, typography, forms, and a `prefers-reduced-motion` block that drops all transitions to `0.01ms`.
4. Self-host Fraunces 500 and 600 and Inter 400, 500 and 600 as Latin-subset WOFF2 in `assets/fonts/`. Add the `@font-face` rules with `font-display: swap`. Preload Inter 400 and Fraunces 600 in the head.
5. `components/`: one partial per component in the design system inventory section 4. Build all thirty five. Also build `bc_icon()` and the icon set from design system section 7b: Lucide outline SVGs committed to `assets/img/icons/`, inlined from a whitelist, never an icon font and never a runtime library. Every one uses tokens, no hard-coded hex values and no pixel values outside the spacing scale.
6. `layout/`: container, grid and section spacing utilities. Keep utilities minimal, this is not a utility framework.
7. `inc/performance.php`: dequeue `wp-block-library`, `classic-theme-styles`, `global-styles`, `wc-blocks-style`, `woocommerce-layout.css`, `woocommerce-smallscreen.css`, `woocommerce-general.css`, plus the `zoom`, `flexslider` and `photoswipe` gallery scripts. Dequeue jQuery on pages that are not cart, checkout or single product. Dequeue `wc-cart-fragments` site-wide (decision D-15). **The replacement is built in phase 4, so the cart count is knowingly broken at this phase boundary.** That is accepted, but say so in your phase report so nobody spends an hour debugging it.
8. A hidden `/style-guide/` page template rendering every component in every state, light on the eye and honest about spacing. This is the visual regression reference for the rest of the build.
9. Critical CSS: hand-write `assets/critical/home.css`, `archive.css`, `single-product.css` and `checkout.css`, roughly 6 KB each, covering header plus above-the-fold for that template type. Inject the right one in `wp_head` based on the template, and load the main stylesheet with `rel="preload" as="style" onload`.

## Acceptance criteria

- [ ] The style guide page renders every component at 360, 768 and 1440
- [ ] `grep -E "#[0-9a-fA-F]{3,6}" assets/src/scss/components/` returns nothing
- [ ] Contrast on every token pair in design system section 2 verified with a checker, results recorded in the phase notes
- [ ] Focus ring visible on every interactive element, keyboard tab order sensible
- [ ] `prefers-reduced-motion` genuinely stops all motion
- [ ] Built CSS under 45 KB minified and JS under 25 KB minified, `npm run size` passes
- [ ] Every icon in the whitelist renders, an unknown name renders nothing rather than a broken glyph
- [ ] `--c-ink-3` and `--c-accent` are not used for normal-size text anywhere (design system section 2)
- [ ] View source on a plain page: no WooCommerce block CSS, no jQuery, no cart fragments script
- [ ] Fonts load from the theme, not from `fonts.gstatic.com`
- [ ] All four critical CSS files under 8 KB each

## Stop

No page templates, no WooCommerce templates. The style guide is the only page you build.