docs: remove styled-components references from cursorrules

Describe Tailwind as the sole styling system and document the hybrid
inline-utility + c-* recipe convention. Note that semantic attributes
(role, aria-*) must be preserved when restyling.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: tyler-dane

.cursorrules/README.md

@@ -11,7 +11,7 @@ You are an expert full-stack developer working on Compass, a calendar applicatio
 
 This is a monorepo using Bun workspaces with the following packages:
 
-- `@compass/web` - React/TypeScript frontend with Redux, styled-components, webpack
+- `@compass/web` - React/TypeScript frontend with Redux, Tailwind CSS
 - `@compass/backend` - Express.js REST API with MongoDB, Google Calendar sync, WebSocket support
 - `@compass/core` - Shared utilities, types, and business logic
 - `@compass/scripts` - CLI tools for building, database operations, user management
@@ -42,7 +42,7 @@ This directory contains focused rules for different aspects of development:
 ```
 packages/
 ├── backend/src/     # Express.js API, MongoDB, Google Calendar sync
-├── web/src/         # React frontend, Redux state, styled-components
+├── web/src/         # React frontend, Redux state, Tailwind CSS
 ├── core/src/        # Shared utilities, types, business logic
 └── scripts/src/     # CLI tools for builds and operations
 ```

.cursorrules/styling.md

@@ -60,9 +60,30 @@ The pattern is: CSS variable `--color-{category}-{name}` → Tailwind class `{ca
 
 ### Styling Approach
 
-- Use Tailwind utility classes directly in JSX
-- For complex styles, use styled-components (already configured)
-- Follow existing patterns in `packages/web/src/components/`
+Tailwind is the **sole** styling system. Do not introduce any CSS-in-JS or
+runtime styling library; a guard test (`no-styled-components.test.ts`) enforces
+this.
+
+Use a hybrid of inline utilities and `c-*` recipes:
+
+- **Inline Tailwind utilities** for one-off layout and state, applied directly
+  in JSX (e.g. `className="mb-2.5 items-center justify-end gap-[30px]"`).
+- **`c-*` utilities** for reusable component recipes and complex third-party
+  selectors (datepicker internals, animations, calendar grid selectors). These
+  are defined with Tailwind v4's `@utility c-...` directive in
+  `packages/web/src/index.css` (e.g. `c-event-form`, `c-button`,
+  `c-calendar-now-line`). Name reusable recipes with the `c-` prefix.
+- **Semantic CSS-variable tokens** for all theme-dependent colors (see above),
+  so a future `[data-theme="light"]` rollout needs no component changes.
+- **Inline CSS custom properties** only for runtime values that cannot be known
+  at build time — event colors, positions, and dynamic grid counts (e.g.
+  `style={{ "--event-form-bg": color }}`).
+
+Follow existing patterns in `packages/web/src/components/` and the recipes in
+`packages/web/src/index.css`.
+
+Preserve semantic attributes (`role`, `aria-*`, `title`) when restyling — they
+are load-bearing for assistive tech and e2e selectors, not presentation.
 
 ## Module Imports