/* 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;
}