# Task 2.1 Apply Report: Extract Global Styles and Tokens

**Status:** Success

## Files Created (4)

- `apps/web/src/styles/tokens.css` (69 lines) — CSS custom properties:
  - `:root` with all design tokens (colors, spacing, breakpoints, typography)
  - `[data-theme="dark"]` with dark mode overrides

- `apps/web/src/styles/global.css` (127 lines) — Global resets and shell layout:
  - `* { box-sizing: border-box; }`
  - `body` reset with theme background
  - `a` link reset
  - `.shell`, `.shell-header`, `.shell-body`, `.shell-nav`, `.shell-content`
  - `.nav-item`, `.nav-item-active`, `.nav-section-title`, `.nav-divider`
  - `.brand`, `.header-actions`
  - `.eyebrow`
  - Responsive shell media query (`@media (max-width: 767px)`)

- `apps/web/src/styles/utilities.css` (718 lines) — Utility classes and generic primitives:
  - `.stack`, `.stack-sm`, `.stack-md`, `.stack-lg`
  - `.row`, `.grid`
  - `.truncate`, `.truncate-multiline`, `.break-word`
  - Touch target utilities (`min-height: 44px`)
  - `.container` with responsive breakpoints
  - `.card-grid`, `.card`, `.card-label`, `.card-value`
  - `.primary-button`, `.secondary-button`, `.ghost-button`
  - `.user-chip`, `.center-screen`, `.page-header`
  - `.dialog-overlay`, `.dialog`, `.dialog-lg`
  - `.form-field`, `.form-group`, `.dialog-actions`
  - `.error-text`, `.success-text`, `.danger-text`, `.danger-button`
  - `.small`, `.muted`
  - URL validation styles
  - Responsive table/card layout utilities
  - Icon system utilities

- `apps/web/src/styles/syntax-highlight.css` (131 lines) — Prism.js theme:
  - `code[class*="language-"]`, `pre[class*="language-"]` base styles
  - All `.token.*` color rules (comment, keyword, string, function, etc.)
  - `.language-css .token.string` override

## Files Modified (1)

- `apps/web/src/main.tsx` — Replaced `import "./styles.css";` with:
  ```ts
  import "./styles/tokens.css";
  import "./styles/global.css";
  import "./styles/utilities.css";
  import "./styles/syntax-highlight.css";
  ```

## Files Preserved

- `apps/web/src/styles.css` — Kept intact for backward compatibility. Component/page-specific styles remain here and will be extracted into CSS Modules in Tasks 2.2 and 2.3.

## Quality Gate Results

- `npm run build` — **PASS** — Build succeeds, output CSS 17.58 kB
- `npm run lint` — **PASS** — Zero warnings
- Visual sanity: Shell layout, navigation, and base styles load correctly via the new imports

## Notes

- `utilities.css` is 718 lines because it contains many generic primitives (.card, .button, .dialog, .form-field) that are used across multiple components. These will be further split into CSS Modules in Tasks 2.2–2.3 as components are extracted.
- No CSS rules were modified during extraction — pure copy-paste.
- The `styles.css` file still exists and is functional; it will be deleted in Task 2.3 after all component/page styles are extracted into CSS Modules.