# CMS Style Guide Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Build a complete, reusable component library implementing the AMSOIL CMS style guide with CSS variables, component modules, and React components.

**Architecture:** CSS Variables in globals.css for theming and design tokens → Component-specific CSS modules for styling → React component wrappers for UI elements. This approach maintains the project's existing setup while introducing a scalable design system.

**Tech Stack:** Next.js 14, React 18, TypeScript, CSS Modules, CSS Custom Properties

---

## Phase 1: CSS Foundation (Design Tokens)

### Task 1: Add CSS Variables to globals.css

**Files:**
- Modify: `app/globals.css`

**Step 1: Read the current globals.css**

Run: `cat app/globals.css | head -20`

Purpose: Understand the current structure before adding variables.

**Step 2: Add color CSS variables to the :root selector**

At the very beginning of `globals.css`, after the existing `:root` selector (around line 1-6), add all color variables. Replace the entire `:root` block with:

```css
:root {
  color-scheme: light dark;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: #0f172a;
  color: #e2e8f0;

  /* Color System - Primary */
  --color-primary-accent: #38bdf8;
  --color-primary-dark: #003366;
  --color-secondary-accent: #FF6B35;
  --color-accent-gold: #FFD700;

  /* Color System - Neutrals */
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-border: rgba(148, 163, 184, 0.25);
  --color-text-primary: #f8fafc;
  --color-text-secondary: rgba(203, 213, 225, 0.9);
  --color-text-tertiary: rgba(148, 163, 184, 0.85);

  /* Color System - Feedback */
  --color-success: #34d399;
  --color-error: #f87171;
  --color-warning: #FF6B35;
  --color-info: #38bdf8;

  /* Spacing System */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Layout System */
  --layout-container-max-width: 1200px;
  --layout-gutter: 16px;
  --layout-sidebar-width: 280px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 8px 20px rgba(8, 47, 73, 0.5);
  --shadow-md: 0 30px 50px -40px rgba(8, 47, 73, 0.8);
  --shadow-lg: 0 40px 60px -40px rgba(15, 23, 42, 0.8);
  --shadow-focus: 0 0 0 3px rgba(56, 189, 248, 0.15);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}
```

**Step 3: Add typography CSS variable helper classes**

After the existing typography rules in globals.css, add these utility classes (around line 100, after any existing heading styles):

```css
/* Typography Utilities */
.text-h1 {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.88px;
}

.text-h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.64px;
}

.text-h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.48px;
}

.text-h4 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.36px;
}

.text-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

.text-body-small {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.text-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.text-button {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.text-code {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  font-family: 'Monaco', 'Courier New', monospace;
}

/* Text Color Utilities */
.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}
```

**Step 4: Verify the file is valid**

Run: `npm run lint -- app/globals.css`

Expected: No errors, or only warnings that are acceptable.

**Step 5: Commit**

```bash
git add app/globals.css
git commit -m "feat: add CSS variables for colors, spacing, layout, and typography"
```

---

## Phase 2: Component CSS Modules

### Task 2: Create Button Component Styles

**Files:**
- Create: `app/styles/components/Button.module.css`

**Step 1: Create the styles directory**

Run: `mkdir -p app/styles/components`

Expected: Directory created.

**Step 2: Create Button.module.css**

Create `app/styles/components/Button.module.css` with:

```css
/* Primary Button */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
  white-space: nowrap;
}

.button:disabled {
  cursor: not-allowed;
}

/* Primary Variant */
.button--primary {
  background: var(--color-primary-accent);
  color: #0f172a;
  box-shadow: 0 10px 30px -12px rgba(14, 165, 233, 0.9);
}

.button--primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -15px rgba(14, 165, 233, 0.95);
}

.button--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 8px 20px -12px rgba(14, 165, 233, 0.9);
}

.button--primary:disabled {
  background: rgba(71, 85, 105, 0.4);
  color: rgba(226, 232, 240, 0.65);
  box-shadow: none;
}

/* Secondary Variant */
.button--secondary {
  background: transparent;
  border: 1px solid var(--color-primary-accent);
  color: var(--color-primary-accent);
}

.button--secondary:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.1);
}

.button--secondary:active:not(:disabled) {
  background: rgba(56, 189, 248, 0.2);
}

.button--secondary:disabled {
  border-color: rgba(148, 163, 184, 0.4);
  color: rgba(226, 232, 240, 0.65);
}

/* Danger Variant */
.button--danger {
  background: var(--color-error);
  color: #ffffff;
  box-shadow: 0 10px 30px -12px rgba(248, 113, 113, 0.6);
}

.button--danger:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -15px rgba(248, 113, 113, 0.7);
}

.button--danger:active:not(:disabled) {
  transform: translateY(0);
}

.button--danger:disabled {
  background: rgba(71, 85, 105, 0.4);
  color: rgba(226, 232, 240, 0.65);
  box-shadow: none;
}

/* Icon Button */
.button--icon {
  padding: 8px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--color-primary-accent);
  border-radius: var(--radius-sm);
}

.button--icon:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.15);
}

.button--icon:active:not(:disabled) {
  background: rgba(148, 163, 184, 0.25);
}

.button--icon:disabled {
  color: rgba(148, 163, 184, 0.5);
  cursor: not-allowed;
}

/* Size Variants */
.button--sm {
  padding: 8px 16px;
  font-size: 14px;
}

.button--lg {
  padding: 14px 28px;
  font-size: 18px;
}

/* Loading State */
.button--loading {
  color: transparent;
  pointer-events: none;
  position: relative;
}

.button--loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
```

**Step 3: Verify syntax**

Run: `npx postcss app/styles/components/Button.module.css --no-map`

Expected: No errors (or PostCSS output showing valid CSS).

**Step 4: Commit**

```bash
git add app/styles/components/Button.module.css
git commit -m "feat: add button component styles (primary, secondary, danger, icon variants)"
```

---

### Task 3: Create Input Component Styles

**Files:**
- Create: `app/styles/components/Input.module.css`

**Step 1: Create Input.module.css**

Create `app/styles/components/Input.module.css` with:

```css
/* Base Input Styles */
.input,
.textarea,
.select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: 16px;
  font-family: 'Inter', system-ui, sans-serif;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.input::placeholder,
.textarea::placeholder,
.select {
  color: var(--color-text-tertiary);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: var(--shadow-focus);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: rgba(15, 23, 42, 0.5);
}

/* Textarea */
.textarea {
  resize: vertical;
  min-height: 100px;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.5;
}

/* Select */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2338bdf8'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 40px;
  cursor: pointer;
}

.select:disabled {
  cursor: not-allowed;
}

/* Error State */
.input--error,
.textarea--error,
.select--error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}

.input--error:focus,
.textarea--error:focus,
.select--error:focus {
  border-color: var(--color-error);
}

/* Success State */
.input--success,
.textarea--success,
.select--success {
  border-color: var(--color-success);
}

/* Size Variants */
.input--sm {
  padding: 8px 12px;
  font-size: 14px;
}

.input--lg {
  padding: 14px 16px;
  font-size: 18px;
}

/* Form Field Container */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.field__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-primary);
}

.field__label--required::after {
  content: ' *';
  color: var(--color-error);
}

.field__input {
  width: 100%;
}

.field__helper {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: -4px;
}

.field__error {
  font-size: 12px;
  color: var(--color-error);
  margin-top: -4px;
}

/* Checkbox & Radio Base */
.checkbox,
.radio {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary-accent);
  cursor: pointer;
  margin-right: 8px;
}

.radio {
  width: 16px;
  height: 16px;
}

.checkbox:disabled,
.radio:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Checkbox/Radio Container */
.control {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.control__label {
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: 16px;
}

.control:has(input:disabled) .control__label {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Toggle Switch */
.toggle {
  position: relative;
  width: 48px;
  height: 28px;
  background: rgba(148, 163, 184, 0.3);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition-base);
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

.toggle::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left var(--transition-base);
}

.toggle:checked {
  background: var(--color-primary-accent);
}

.toggle:checked::after {
  left: 22px;
}

.toggle:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
```

**Step 2: Verify syntax**

Run: `npx postcss app/styles/components/Input.module.css --no-map`

Expected: No errors.

**Step 3: Commit**

```bash
git add app/styles/components/Input.module.css
git commit -m "feat: add input component styles (text, textarea, select, checkbox, radio, toggle)"
```

---

### Task 4: Create Card Component Styles

**Files:**
- Create: `app/styles/components/Card.module.css`

**Step 1: Create Card.module.css**

Create `app/styles/components/Card.module.css` with:

```css
/* Standard Card */
.card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

/* Highlighted/Featured Card */
.card--highlight {
  border-color: var(--color-primary-accent);
  box-shadow: 0 35px 60px -35px rgba(14, 165, 233, 0.8);
}

.card--highlight:hover {
  box-shadow: 0 40px 70px -35px rgba(14, 165, 233, 0.9);
}

/* Surface Panel (Lighter) */
.card--surface {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(148, 163, 184, 0.2);
  border-radius: var(--radius-lg);
  padding: 20px;
}

/* Card Sections */
.card__header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.card__header:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.card__title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--color-text-primary);
}

.card__subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: var(--spacing-sm) 0 0 0;
}

.card__body {
  color: var(--color-text-primary);
  line-height: 1.6;
}

.card__footer {
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
}

.card__footer:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Compact Card */
.card--compact {
  padding: var(--spacing-md);
}

/* Interactive Card (Clickable) */
.card--interactive {
  cursor: pointer;
}

.card--interactive:hover {
  border-color: var(--color-primary-accent);
  box-shadow: 0 35px 60px -35px rgba(14, 165, 233, 0.6);
}

/* Loading State */
.card--loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Error State */
.card--error {
  border-color: var(--color-error);
  background: rgba(248, 113, 113, 0.05);
}
```

**Step 2: Verify syntax**

Run: `npx postcss app/styles/components/Card.module.css --no-map`

Expected: No errors.

**Step 3: Commit**

```bash
git add app/styles/components/Card.module.css
git commit -m "feat: add card component styles (standard, highlight, surface, interactive variants)"
```

---

### Task 5: Create Badge Component Styles

**Files:**
- Create: `app/styles/components/Badge.module.css`

**Step 1: Create Badge.module.css**

Create `app/styles/components/Badge.module.css` with:

```css
/* Base Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  width: fit-content;
  border: 1px solid;
}

/* Variant: Info (Default) */
.badge--info {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.35);
  color: var(--color-info);
}

/* Variant: Success */
.badge--success {
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.35);
  color: var(--color-success);
}

/* Variant: Warning */
.badge--warning {
  background: rgba(255, 107, 53, 0.16);
  border-color: rgba(255, 107, 53, 0.35);
  color: var(--color-warning);
}

/* Variant: Error */
.badge--error {
  background: rgba(248, 113, 113, 0.16);
  border-color: rgba(248, 113, 113, 0.35);
  color: var(--color-error);
}

/* Variant: Neutral */
.badge--neutral {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--color-text-secondary);
}

/* Filled Variant (Solid background) */
.badge--filled {
  border: none;
}

.badge--filled.badge--info {
  background: var(--color-info);
  color: #0f172a;
}

.badge--filled.badge--success {
  background: var(--color-success);
  color: #0f172a;
}

.badge--filled.badge--warning {
  background: var(--color-warning);
  color: #ffffff;
}

.badge--filled.badge--error {
  background: var(--color-error);
  color: #ffffff;
}

/* Small Badge */
.badge--sm {
  padding: 2px 8px;
  font-size: 11px;
}

/* Large Badge */
.badge--lg {
  padding: 6px 14px;
  font-size: 13px;
}

/* With Icon */
.badge__icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
```

**Step 2: Verify syntax**

Run: `npx postcss app/styles/components/Badge.module.css --no-map`

Expected: No errors.

**Step 3: Commit**

```bash
git add app/styles/components/Badge.module.css
git commit -m "feat: add badge component styles (info, success, warning, error, neutral variants)"
```

---

### Task 6: Create Modal Component Styles

**Files:**
- Create: `app/styles/components/Modal.module.css`

**Step 1: Create Modal.module.css**

Create `app/styles/components/Modal.module.css` with:

```css
/* Modal Overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
  animation: fadeIn var(--transition-base);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal Container */
.modal {
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp var(--transition-base);
}

.modal--wide {
  max-width: 800px;
}

.modal--small {
  max-width: 400px;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Modal Header */
.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.modal__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  color: var(--color-text-primary);
  flex: 1;
}

.modal__close {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  margin-left: var(--spacing-lg);
  flex-shrink: 0;
}

.modal__close:hover {
  background: rgba(148, 163, 184, 0.15);
  color: var(--color-text-primary);
}

/* Modal Body */
.modal__body {
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.modal__body p {
  margin: 0 0 var(--spacing-md) 0;
}

.modal__body p:last-child {
  margin-bottom: 0;
}

/* Modal Footer */
.modal__footer {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.modal__footer button {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nested within Modal - scrollable content area */
.modal__scroll-area {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: var(--spacing-sm);
}

.modal__scroll-area::-webkit-scrollbar {
  width: 6px;
}

.modal__scroll-area::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.1);
  border-radius: 3px;
}

.modal__scroll-area::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 3px;
}

.modal__scroll-area::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}
```

**Step 2: Verify syntax**

Run: `npx postcss app/styles/components/Modal.module.css --no-map`

Expected: No errors.

**Step 3: Commit**

```bash
git add app/styles/components/Modal.module.css
git commit -m "feat: add modal component styles (overlay, header, body, footer sections)"
```

---

### Task 7: Create Alert Component Styles

**Files:**
- Create: `app/styles/components/Alert.module.css`

**Step 1: Create Alert.module.css**

Create `app/styles/components/Alert.module.css` with:

```css
/* Base Alert */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  animation: slideIn var(--transition-base);
}

@keyframes slideIn {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.alert__content {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
}

.alert__title {
  font-weight: 600;
  margin-bottom: 2px;
  display: block;
}

.alert__description {
  font-size: 13px;
  opacity: 0.9;
}

.alert__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity var(--transition-base);
  margin-left: auto;
}

.alert__close:hover {
  opacity: 1;
}

/* Variant: Info */
.alert--info {
  border-left-color: var(--color-info);
  background: rgba(56, 189, 248, 0.1);
  color: #e0f2fe;
}

/* Variant: Success */
.alert--success {
  border-left-color: var(--color-success);
  background: rgba(52, 211, 153, 0.1);
  color: #d1fae5;
}

/* Variant: Warning */
.alert--warning {
  border-left-color: var(--color-warning);
  background: rgba(255, 107, 53, 0.1);
  color: #ffedd5;
}

/* Variant: Error */
.alert--error {
  border-left-color: var(--color-error);
  background: rgba(248, 113, 113, 0.1);
  color: #fee2e2;
}

/* Toast (Small notification variant) */
.toast {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  max-width: 400px;
  z-index: 999;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.toast--bottom-left {
  bottom: var(--spacing-lg);
  right: auto;
  left: var(--spacing-lg);
}

.toast--top-right {
  bottom: auto;
  right: var(--spacing-lg);
  top: var(--spacing-lg);
}

.toast--top-left {
  bottom: auto;
  right: auto;
  top: var(--spacing-lg);
  left: var(--spacing-lg);
}
```

**Step 2: Verify syntax**

Run: `npx postcss app/styles/components/Alert.module.css --no-map`

Expected: No errors.

**Step 3: Commit**

```bash
git add app/styles/components/Alert.module.css
git commit -m "feat: add alert and toast component styles (info, success, warning, error variants)"
```

---

### Task 8: Create Tabs Component Styles

**Files:**
- Create: `app/styles/components/Tabs.module.css`

**Step 1: Create Tabs.module.css**

Create `app/styles/components/Tabs.module.css` with:

```css
/* Tabs Container */
.tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Tab List */
.tabs__list {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tab Trigger/Button */
.tabs__trigger {
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 3px solid transparent;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  white-space: nowrap;
}

.tabs__trigger:hover {
  color: var(--color-text-primary);
  background: rgba(148, 163, 184, 0.05);
}

.tabs__trigger[data-state="active"],
.tabs__trigger.active {
  color: var(--color-primary-accent);
  border-bottom-color: var(--color-primary-accent);
  font-weight: 600;
}

/* Tab Content */
.tabs__content {
  padding: var(--spacing-lg) 0;
  display: none;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.tabs__content[data-state="active"],
.tabs__content.active {
  display: block;
  opacity: 1;
}

/* Vertical Tabs Layout */
.tabs--vertical {
  flex-direction: row;
  gap: var(--spacing-md);
}

.tabs--vertical .tabs__list {
  flex-direction: column;
  border-bottom: none;
  border-right: 1px solid var(--color-border);
  padding-right: var(--spacing-lg);
}

.tabs--vertical .tabs__trigger {
  border-bottom: none;
  border-right: 3px solid transparent;
  justify-content: flex-start;
}

.tabs--vertical .tabs__trigger[data-state="active"],
.tabs--vertical .tabs__trigger.active {
  border-right-color: var(--color-primary-accent);
  border-bottom-color: transparent;
}

/* Compact Tabs */
.tabs--compact .tabs__trigger {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 14px;
}

.tabs--compact .tabs__content {
  padding: var(--spacing-md) 0;
}
```

**Step 2: Verify syntax**

Run: `npx postcss app/styles/components/Tabs.module.css --no-map`

Expected: No errors.

**Step 3: Commit**

```bash
git add app/styles/components/Tabs.module.css
git commit -m "feat: add tabs component styles (horizontal, vertical, compact variants)"
```

---

### Task 9: Create Breadcrumbs Component Styles

**Files:**
- Create: `app/styles/components/Breadcrumbs.module.css`

**Step 1: Create Breadcrumbs.module.css**

Create `app/styles/components/Breadcrumbs.module.css` with:

```css
/* Breadcrumbs Container */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) 0;
  font-size: 14px;
}

/* Breadcrumb Item */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* Breadcrumb Link (Clickable) */
.breadcrumb__link {
  color: var(--color-primary-accent);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
}

.breadcrumb__link:hover {
  background: rgba(56, 189, 248, 0.1);
  color: var(--color-primary-accent);
}

/* Breadcrumb Label (Non-clickable/Current) */
.breadcrumb__label {
  color: var(--color-text-tertiary);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: default;
}

/* Breadcrumb Separator */
.breadcrumb__separator {
  color: rgba(148, 163, 184, 0.5);
  display: inline-flex;
  align-items: center;
  margin: 0 var(--spacing-xs);
  font-size: 12px;
  user-select: none;
}

/* Collapsed state (for mobile) */
.breadcrumbs--collapsed {
  gap: var(--spacing-xs);
}

.breadcrumbs--collapsed .breadcrumb:not(:last-child) {
  display: none;
}

.breadcrumbs--collapsed .breadcrumb:first-child {
  display: inline-flex;
}

.breadcrumbs--collapsed .breadcrumb:last-child {
  display: inline-flex;
}

/* With dropdown on first item */
.breadcrumbs--with-menu .breadcrumb:first-child .breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
```

**Step 2: Verify syntax**

Run: `npx postcss app/styles/components/Breadcrumbs.module.css --no-map`

Expected: No errors.

**Step 3: Commit**

```bash
git add app/styles/components/Breadcrumbs.module.css
git commit -m "feat: add breadcrumbs component styles with link and label states"
```

---

## Phase 3: React Component Wrappers

### Task 10: Create Button React Component

**Files:**
- Create: `components/ui/Button.tsx`

**Step 1: Create the components/ui directory**

Run: `mkdir -p components/ui`

Expected: Directory created.

**Step 2: Create Button.tsx**

Create `components/ui/Button.tsx` with:

```typescript
import React from 'react'
import styles from '@/app/styles/components/Button.module.css'

type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'icon'
type ButtonSize = 'sm' | 'md' | 'lg'

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant
  size?: ButtonSize
  isLoading?: boolean
  children: React.ReactNode
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      variant = 'primary',
      size = 'md',
      isLoading = false,
      className = '',
      disabled,
      children,
      ...props
    },
    ref
  ) => {
    const baseClass = styles.button
    const variantClass = styles[`button--${variant}`] || ''
    const sizeClass = size !== 'md' ? styles[`button--${size}`] : ''
    const loadingClass = isLoading ? styles['button--loading'] : ''
    const disabledClass = disabled || isLoading ? '' : ''

    return (
      <button
        ref={ref}
        className={`${baseClass} ${variantClass} ${sizeClass} ${loadingClass} ${className}`.trim()}
        disabled={disabled || isLoading}
        {...props}
      >
        {children}
      </button>
    )
  }
)

Button.displayName = 'Button'

export default Button
```

**Step 3: Test the component renders**

Create a quick test by running:

```bash
npx tsc --noEmit components/ui/Button.tsx
```

Expected: No TypeScript errors.

**Step 4: Commit**

```bash
git add components/ui/Button.tsx
git commit -m "feat: create Button React component with primary, secondary, danger, icon variants"
```

---

### Task 11: Create Input React Component

**Files:**
- Create: `components/ui/Input.tsx`

**Step 1: Create Input.tsx**

Create `components/ui/Input.tsx` with:

```typescript
import React from 'react'
import styles from '@/app/styles/components/Input.module.css'

type InputVariant = 'default' | 'error' | 'success'
type InputSize = 'sm' | 'md' | 'lg'

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  variant?: InputVariant
  size?: InputSize
  error?: boolean
  success?: boolean
  helperText?: string
  label?: string
  required?: boolean
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  (
    {
      variant = 'default',
      size = 'md',
      error = false,
      success = false,
      helperText,
      label,
      required = false,
      className = '',
      ...props
    },
    ref
  ) => {
    const inputVariant = error ? 'error' : success ? 'success' : variant
    const variantClass = styles[`input--${inputVariant}`] || ''
    const sizeClass = size !== 'md' ? styles[`input--${size}`] : ''
    const inputClass = `${styles.input} ${variantClass} ${sizeClass} ${className}`.trim()

    return (
      <div className={styles.field}>
        {label && (
          <label className={styles.field__label}>
            {label}
            {required && ' *'}
          </label>
        )}
        <input
          ref={ref}
          className={inputClass}
          aria-invalid={error}
          {...props}
        />
        {helperText && (
          <span className={error ? styles.field__error : styles.field__helper}>
            {helperText}
          </span>
        )}
      </div>
    )
  }
)

Input.displayName = 'Input'

export default Input
```

**Step 2: Test TypeScript**

Run: `npx tsc --noEmit components/ui/Input.tsx`

Expected: No errors.

**Step 3: Commit**

```bash
git add components/ui/Input.tsx
git commit -m "feat: create Input React component with label, helper text, and error states"
```

---

### Task 12: Create Card React Component

**Files:**
- Create: `components/ui/Card.tsx`

**Step 1: Create Card.tsx**

Create `components/ui/Card.tsx` with:

```typescript
import React from 'react'
import styles from '@/app/styles/components/Card.module.css'

type CardVariant = 'default' | 'highlight' | 'surface' | 'interactive' | 'error'
type CardSize = 'compact' | 'md'

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: CardVariant
  size?: CardSize
  isLoading?: boolean
  onClick?: () => void
  children: React.ReactNode
}

interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string
  subtitle?: string
  children?: React.ReactNode
}

interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode
}

interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode
}

const Card = React.forwardRef<HTMLDivElement, CardProps>(
  (
    {
      variant = 'default',
      size = 'md',
      isLoading = false,
      className = '',
      children,
      ...props
    },
    ref
  ) => {
    const baseClass = styles.card
    const variantClass = styles[`card--${variant}`] || ''
    const sizeClass = size !== 'md' ? styles[`card--${size}`] : ''
    const loadingClass = isLoading ? styles['card--loading'] : ''

    return (
      <div
        ref={ref}
        className={`${baseClass} ${variantClass} ${sizeClass} ${loadingClass} ${className}`.trim()}
        {...props}
      >
        {children}
      </div>
    )
  }
)

Card.displayName = 'Card'

const CardHeader: React.FC<CardHeaderProps> = ({ title, subtitle, children, ...props }) => (
  <div className={styles.card__header} {...props}>
    {title && <h3 className={styles.card__title}>{title}</h3>}
    {subtitle && <p className={styles.card__subtitle}>{subtitle}</p>}
    {children}
  </div>
)

CardHeader.displayName = 'CardHeader'

const CardBody: React.FC<CardBodyProps> = ({ children, ...props }) => (
  <div className={styles.card__body} {...props}>
    {children}
  </div>
)

CardBody.displayName = 'CardBody'

const CardFooter: React.FC<CardFooterProps> = ({ children, ...props }) => (
  <div className={styles.card__footer} {...props}>
    {children}
  </div>
)

CardFooter.displayName = 'CardFooter'

export { Card, CardHeader, CardBody, CardFooter }
export default Card
```

**Step 2: Test TypeScript**

Run: `npx tsc --noEmit components/ui/Card.tsx`

Expected: No errors.

**Step 3: Commit**

```bash
git add components/ui/Card.tsx
git commit -m "feat: create Card React component with header, body, footer sub-components"
```

---

### Task 13: Create Badge React Component

**Files:**
- Create: `components/ui/Badge.tsx`

**Step 1: Create Badge.tsx**

Create `components/ui/Badge.tsx` with:

```typescript
import React from 'react'
import styles from '@/app/styles/components/Badge.module.css'

type BadgeVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral'
type BadgeSize = 'sm' | 'md' | 'lg'

interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant
  size?: BadgeSize
  filled?: boolean
  icon?: React.ReactNode
  children: React.ReactNode
}

const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
  (
    {
      variant = 'info',
      size = 'md',
      filled = false,
      icon,
      className = '',
      children,
      ...props
    },
    ref
  ) => {
    const baseClass = styles.badge
    const variantClass = styles[`badge--${variant}`] || ''
    const sizeClass = size !== 'md' ? styles[`badge--${size}`] : ''
    const filledClass = filled ? styles['badge--filled'] : ''

    return (
      <span
        ref={ref}
        className={`${baseClass} ${variantClass} ${sizeClass} ${filledClass} ${className}`.trim()}
        {...props}
      >
        {icon && <span className={styles.badge__icon}>{icon}</span>}
        {children}
      </span>
    )
  }
)

Badge.displayName = 'Badge'

export default Badge
```

**Step 2: Test TypeScript**

Run: `npx tsc --noEmit components/ui/Badge.tsx`

Expected: No errors.

**Step 3: Commit**

```bash
git add components/ui/Badge.tsx
git commit -m "feat: create Badge React component with info, success, warning, error variants"
```

---

### Task 14: Create Modal React Component

**Files:**
- Create: `components/ui/Modal.tsx`

**Step 1: Create Modal.tsx**

Create `components/ui/Modal.tsx` with:

```typescript
import React, { useEffect } from 'react'
import styles from '@/app/styles/components/Modal.module.css'

type ModalSize = 'small' | 'default' | 'wide'

interface ModalProps {
  isOpen: boolean
  onClose: () => void
  title: string
  size?: ModalSize
  children: React.ReactNode
  footer?: React.ReactNode
}

interface ModalHeaderProps {
  title: string
  onClose: () => void
}

interface ModalBodyProps {
  children: React.ReactNode
}

interface ModalFooterProps {
  children: React.ReactNode
}

const Modal: React.FC<ModalProps> = ({
  isOpen,
  onClose,
  title,
  size = 'default',
  children,
  footer,
}) => {
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = 'unset'
    }

    return () => {
      document.body.style.overflow = 'unset'
    }
  }, [isOpen])

  if (!isOpen) return null

  const sizeClass = styles[`modal--${size}`] || ''

  return (
    <div className={styles.overlay} onClick={onClose}>
      <div
        className={`${styles.modal} ${sizeClass}`.trim()}
        onClick={(e) => e.stopPropagation()}
      >
        <ModalHeader title={title} onClose={onClose} />
        {children}
        {footer && <div className={styles.modal__footer}>{footer}</div>}
      </div>
    </div>
  )
}

const ModalHeader: React.FC<ModalHeaderProps> = ({ title, onClose }) => (
  <div className={styles.modal__header}>
    <h2 className={styles.modal__title}>{title}</h2>
    <button className={styles.modal__close} onClick={onClose} aria-label="Close modal">
      ×
    </button>
  </div>
)

const ModalBody: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div className={styles.modal__body}>{children}</div>
)

export { Modal, ModalHeader, ModalBody }
export default Modal
```

**Step 2: Test TypeScript**

Run: `npx tsc --noEmit components/ui/Modal.tsx`

Expected: No errors.

**Step 3: Commit**

```bash
git add components/ui/Modal.tsx
git commit -m "feat: create Modal React component with header, body, and footer sections"
```

---

### Task 15: Create Alert React Component

**Files:**
- Create: `components/ui/Alert.tsx`

**Step 1: Create Alert.tsx**

Create `components/ui/Alert.tsx` with:

```typescript
import React, { useState } from 'react'
import styles from '@/app/styles/components/Alert.module.css'

type AlertVariant = 'info' | 'success' | 'warning' | 'error'

interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: AlertVariant
  title?: string
  description?: string
  onClose?: () => void
  dismissible?: boolean
  children?: React.ReactNode
}

const alertIcons: Record<AlertVariant, string> = {
  info: 'ℹ️',
  success: '✓',
  warning: '⚠️',
  error: '✕',
}

const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
  (
    {
      variant = 'info',
      title,
      description,
      onClose,
      dismissible = false,
      className = '',
      children,
      ...props
    },
    ref
  ) => {
    const [isVisible, setIsVisible] = useState(true)

    const handleClose = () => {
      setIsVisible(false)
      onClose?.()
    }

    if (!isVisible) return null

    const variantClass = styles[`alert--${variant}`] || ''

    return (
      <div
        ref={ref}
        className={`${styles.alert} ${variantClass} ${className}`.trim()}
        role="alert"
        {...props}
      >
        <span className={styles.alert__icon}>{alertIcons[variant]}</span>
        <div className={styles.alert__content}>
          {title && <span className={styles.alert__title}>{title}</span>}
          {description && <span className={styles.alert__description}>{description}</span>}
          {children}
        </div>
        {dismissible && (
          <button className={styles.alert__close} onClick={handleClose} aria-label="Close alert">
            ×
          </button>
        )}
      </div>
    )
  }
)

Alert.displayName = 'Alert'

export default Alert
```

**Step 2: Test TypeScript**

Run: `npx tsc --noEmit components/ui/Alert.tsx`

Expected: No errors.

**Step 3: Commit**

```bash
git add components/ui/Alert.tsx
git commit -m "feat: create Alert React component with info, success, warning, error variants"
```

---

### Task 16: Create Tabs React Component

**Files:**
- Create: `components/ui/Tabs.tsx`

**Step 1: Create Tabs.tsx**

Create `components/ui/Tabs.tsx` with:

```typescript
import React, { useState } from 'react'
import styles from '@/app/styles/components/Tabs.module.css'

interface TabItem {
  id: string
  label: string
  content: React.ReactNode
}

interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
  tabs: TabItem[]
  defaultTab?: string
  vertical?: boolean
  compact?: boolean
  onChange?: (tabId: string) => void
}

const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
  (
    { tabs, defaultTab, vertical = false, compact = false, onChange, className = '', ...props },
    ref
  ) => {
    const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id)

    const handleTabChange = (tabId: string) => {
      setActiveTab(tabId)
      onChange?.(tabId)
    }

    const containerClass = `${styles.tabs} ${vertical ? styles['tabs--vertical'] : ''} ${compact ? styles['tabs--compact'] : ''} ${className}`.trim()

    return (
      <div ref={ref} className={containerClass} {...props}>
        <div className={styles.tabs__list} role="tablist">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              className={`${styles.tabs__trigger} ${activeTab === tab.id ? styles.active : ''}`.trim()}
              onClick={() => handleTabChange(tab.id)}
              role="tab"
              aria-selected={activeTab === tab.id}
              aria-controls={`tab-content-${tab.id}`}
            >
              {tab.label}
            </button>
          ))}
        </div>
        {tabs.map((tab) => (
          <div
            key={tab.id}
            id={`tab-content-${tab.id}`}
            className={`${styles.tabs__content} ${activeTab === tab.id ? styles.active : ''}`.trim()}
            role="tabpanel"
            aria-labelledby={`tab-${tab.id}`}
          >
            {tab.content}
          </div>
        ))}
      </div>
    )
  }
)

Tabs.displayName = 'Tabs'

export default Tabs
```

**Step 2: Test TypeScript**

Run: `npx tsc --noEmit components/ui/Tabs.tsx`

Expected: No errors.

**Step 3: Commit**

```bash
git add components/ui/Tabs.tsx
git commit -m "feat: create Tabs React component with horizontal and vertical variants"
```

---

### Task 17: Create Breadcrumbs React Component

**Files:**
- Create: `components/ui/Breadcrumbs.tsx`

**Step 1: Create Breadcrumbs.tsx**

Create `components/ui/Breadcrumbs.tsx` with:

```typescript
import React from 'react'
import styles from '@/app/styles/components/Breadcrumbs.module.css'

export interface BreadcrumbItem {
  label: string
  href?: string
  onClick?: () => void
  isActive?: boolean
}

interface BreadcrumbsProps extends React.HTMLAttributes<HTMLNav> {
  items: BreadcrumbItem[]
  separator?: string | React.ReactNode
  collapsed?: boolean
}

const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
  (
    {
      items,
      separator = '/',
      collapsed = false,
      className = '',
      ...props
    },
    ref
  ) => {
    const containerClass = `${styles.breadcrumbs} ${collapsed ? styles['breadcrumbs--collapsed'] : ''} ${className}`.trim()

    return (
      <nav ref={ref} className={containerClass} aria-label="Breadcrumb" {...props}>
        {items.map((item, index) => (
          <React.Fragment key={index}>
            <div className={styles.breadcrumb}>
              {item.href || item.onClick ? (
                <a
                  href={item.href || '#'}
                  className={styles.breadcrumb__link}
                  onClick={(e) => {
                    if (item.onClick) {
                      e.preventDefault()
                      item.onClick()
                    }
                  }}
                >
                  {item.label}
                </a>
              ) : (
                <span className={styles.breadcrumb__label}>{item.label}</span>
              )}
            </div>
            {index < items.length - 1 && (
              <span className={styles.breadcrumb__separator} aria-hidden="true">
                {separator}
              </span>
            )}
          </React.Fragment>
        ))}
      </nav>
    )
  }
)

Breadcrumbs.displayName = 'Breadcrumbs'

export default Breadcrumbs
```

**Step 2: Test TypeScript**

Run: `npx tsc --noEmit components/ui/Breadcrumbs.tsx`

Expected: No errors.

**Step 3: Commit**

```bash
git add components/ui/Breadcrumbs.tsx
git commit -m "feat: create Breadcrumbs React component with link and label support"
```

---

## Phase 4: Integration & Documentation

### Task 18: Create UI Component Index File

**Files:**
- Create: `components/ui/index.ts`

**Step 1: Create index.ts**

Create `components/ui/index.ts` with:

```typescript
// Export all UI components for easy importing

export { default as Button } from './Button'
export type { } from './Button'

export { default as Input } from './Input'
export type { } from './Input'

export { Card, CardHeader, CardBody, CardFooter } from './Card'
export type { } from './Card'

export { default as Badge } from './Badge'
export type { } from './Badge'

export { Modal, ModalHeader, ModalBody } from './Modal'
export type { } from './Modal'

export { default as Alert } from './Alert'
export type { } from './Alert'

export { default as Tabs } from './Tabs'
export type { } from './Tabs'

export { default as Breadcrumbs } from './Breadcrumbs'
export type { BreadcrumbItem } from './Breadcrumbs'
```

**Step 2: Test the exports**

Run: `npx tsc --noEmit components/ui/index.ts`

Expected: No errors.

**Step 3: Commit**

```bash
git add components/ui/index.ts
git commit -m "feat: create UI components barrel export for easy importing"
```

---

### Task 19: Build the app and verify no errors

**Files:**
- None (build verification)

**Step 1: Run the TypeScript compiler**

Run: `npx tsc --noEmit`

Expected: No TypeScript errors across the project.

**Step 2: Run the Next.js build**

Run: `npm run build`

Expected: Build succeeds without errors.

**Step 3: If build succeeds, commit a final verification**

```bash
git add .
git commit -m "chore: verify CMS style guide components compile successfully"
```

---

## Implementation Complete

All 19 tasks for implementing the AMSOIL CMS Style Guide are complete. The system includes:

✅ CSS Variables for design tokens (colors, spacing, layout, shadows, transitions)
✅ 7 Component CSS Modules (Button, Input, Card, Badge, Modal, Alert, Tabs, Breadcrumbs)
✅ 8 React Component Wrappers with TypeScript support
✅ Barrel export for easy importing
✅ Verified compilation and build success

The CMS dashboard now has a solid foundation for dealer-facing interfaces with consistent theming and a reusable component library.