New light theme

app/assets/stylesheets/theme.css

@@ -0,0 +1,161 @@
+/* Theme Rules from docs/theme-rules.md - Light Theme Only */
+
+/* Custom properties for the design system */
+:root {
+  /* Primary - Purple gradient system */
+ --color-primary-50: #faf5ff;
+ --color-primary-100: #f3e8ff;
+ --color-primary-200: #e9d5ff;
+ --color-primary-300: #d8b4fe;
+ --color-primary-400: #c084fc;
+ --color-primary-500: #a855f7;
+ --color-primary-600: #9333ea;
+ --color-primary-700: #7e22ce;
+ --color-primary-800: #6b21a8;
+ --color-primary-900: #581c87;
+
+  /* Accent - Pink gradient */
+ --color-accent-400: #f472b6;
+ --color-accent-500: #ec4899;
+ --color-accent-600: #db2777;
+
+  /* Neutral - Slate system */
+ --color-neutral-50: #f8fafc;
+ --color-neutral-100: #f1f5f9;
+ --color-neutral-200: #e2e8f0;
+ --color-neutral-300: #cbd5e1;
+ --color-neutral-400: #94a3b8;
+ --color-neutral-500: #64748b;
+ --color-neutral-600: #475569;
+ --color-neutral-700: #334155;
+ --color-neutral-800: #1e293b;
+ --color-neutral-900: #0f172a;
+
+  /* Font families */
+ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* Spacing scale */
+ --space-1: 0.25rem;      /* 4px */
+ --space-2: 0.5rem;       /* 8px */
+ --space-3: 0.75rem;      /* 12px */
+ --space-4: 1rem;         /* 16px */
+ --space-5: 1.25rem;      /* 20px */
+ --space-6: 1.5rem;        /* 24px */
+ --space-8: 2rem;         /* 32px */
+ --space-10: 2.5rem;      /* 40px */
+ --space-12: 3rem;        /* 48px */
+}
+
+/* Button components */
+.btn-primary {
+  @apply bg-gradient-to-r from-purple-600 to-pink-600 text-white font-medium py-2 px-4 rounded-lg shadow-sm hover:shadow-md transition-all duration-200;
+}
+
+.btn-secondary {
+  @apply bg-white text-purple-600 border border-purple-200 font-medium py-2 px-4 rounded-lg hover:bg-purple-50 transition-colors duration-200;
+}
+
+.btn-destructive {
+  @apply bg-red-600 text-white font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-red-700 transition-colors duration-200;
+}
+
+/* Card components */
+.card {
+  @apply bg-white rounded-lg shadow-sm border border-neutral-200 p-6 hover:shadow-md transition-shadow duration-200;
+}
+
+.card-header {
+  @apply pb-4 border-b border-neutral-200 mb-4;
+}
+
+.card-body {
+  @apply space-y-4;
+}
+
+/* Form components */
+.form-input {
+  @apply block w-full rounded-md border-neutral-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm;
+}
+
+.form-label {
+  @apply block text-sm font-medium text-neutral-700 mb-1;
+}
+
+.form-error {
+  @apply text-sm text-red-600 mt-1;
+}
+
+/* Navigation */
+.nav-link {
+  @apply text-neutral-600 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
+}
+
+.nav-link-active {
+  @apply text-purple-600 bg-purple-50;
+}
+
+/* Layout utilities */
+.container {
+  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
+}
+
+.grid-responsive {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
+}
+
+.grid-cards {
+  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
+}
+
+/* Animation utilities */
+.hover-lift {
+  @apply transition-transform duration-200 hover:-translate-y-1;
+}
+
+.hover-glow {
+  @apply transition-all duration-200 hover:shadow-lg hover:shadow-purple-500/25;
+}
+
+.focus-ring {
+  @apply focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
+}
+
+.transition-fast {
+  @apply transition-all duration-150 ease-in-out;
+}
+
+.transition-normal {
+  @apply transition-all duration-200 ease-in-out;
+}
+
+.transition-slow {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+/* State utilities */
+.disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.animate-pulse-subtle {
+  @apply animate-pulse;
+  animation-duration: 3s;
+}
+
+.fade-in {
+  @apply animate-in fade-in-0 duration-500;
+}
+
+/* Accessibility utilities */
+.focus-visible {
+  @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2;
+}
+
+.text-primary {
+  @apply text-neutral-900;
+}
+
+.text-secondary {
+  @apply text-neutral-600;
+}