Files
nextcraft/apps/web/app/globals.css
T
CIAgent 810485ecc8 docs(milestone): complete v0.1-nextcraft-ui-prototype
---ci---
phase: 7
milestone: v0.1
status: complete
requirements:
  covered: [REQ-001, REQ-002, REQ-003, REQ-004, REQ-005, REQ-006, REQ-007, REQ-008, REQ-009, REQ-010, REQ-011, REQ-012, REQ-013, REQ-014, REQ-015, REQ-016, REQ-017, REQ-018, REQ-019, REQ-020, REQ-021, REQ-022, REQ-023, REQ-024, REQ-025, REQ-026, REQ-027, REQ-028]
  partial: []
---/ci---

Milestone v0.1 (nextcraft-ui-prototype) complete.

Summary:
- 7 phases (P0 pre-execution + P1-P6 execution + P7 final review)
- 28 requirements covered (all complete)
- 4 surfaces: Learner (7 pages), Marketplace (5), Employer Dashboard (4), Admin (4)
- 19 routes, 104 TypeScript files
- Shared component library (5 primitives + design tokens)
- Mock data: 5 competency stacks (70 competencies), 20 jobs, 15 candidates, 10 employers
- Tech: Next.js 15, Tailwind CSS v4, lucide-react, recharts, @xyflow/react, Inter font
- Storybook with 6 stories
- Dark mode, breadcrumbs, role switcher, responsive design
- Build passes, typecheck passes, Storybook build passes

Phases:
  P0 pre-execution     → v0.0.1
  P1 project-scaffolding → v0.0.2
  P2 learner-surface   → v0.0.3
  P3 marketplace-surface → v0.0.4
  P4 employer-dashboard → v0.0.5
  P5 admin-surface     → v0.0.6
  P6 polish-integration → v0.0.7
  P7 final-review-ship → v0.1.0 (milestone release)
2026-09-10 22:47:56 +00:00

58 lines
1.3 KiB
CSS

@import 'tailwindcss';
/* Use class-based dark mode: the `dark:` variant responds to a `.dark`
class on <html> (toggled by ThemeProvider) instead of the OS
prefers-color-scheme media query. */
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--color-primary-50: #eef2ff;
--color-primary-100: #e0e7ff;
--color-primary-200: #c7d2fe;
--color-primary-300: #a5b4fc;
--color-primary-400: #818cf8;
--color-primary-500: #6366f1;
--color-primary-600: #4f46e5;
--color-primary-700: #4338ca;
--color-primary-800: #3730a3;
--color-primary-900: #312e81;
--color-primary-950: #1e1b4b;
--color-accent-50: #ecfdf5;
--color-accent-100: #d1fae5;
--color-accent-200: #a7f3d0;
--color-accent-300: #6ee7b7;
--color-accent-400: #34d399;
--color-accent-500: #10b981;
--color-accent-600: #059669;
--color-accent-700: #047857;
--color-accent-800: #065f46;
--color-accent-900: #064e3b;
--color-accent-950: #022c22;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
}
@layer base {
html {
font-family: var(--font-sans);
color-scheme: light;
}
html.dark {
color-scheme: dark;
}
body {
@apply bg-white text-slate-900 antialiased;
}
html.dark body {
@apply bg-slate-950 text-slate-100;
}
}