captains-log/frontend/app/app.css

@import 'tailwindcss';

@theme {
  --font-sans:
    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  /* Captain's Log Design Tokens */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-950: #172554;

  --color-task-todo: #3b82f6;
  --color-task-done: #22c55e;
  --color-task-backlog: #6b7280;
}

html,
body {
  @apply bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100;

  @media (prefers-color-scheme: dark) {
    color-scheme: dark;
  }
}

/* Captain's Log Component Styles */
.task-card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4 transition-all duration-200;
}

.task-card:hover {
  @apply shadow-md border-gray-300 dark:border-gray-600;
}

.quick-capture {
  @apply bg-white dark:bg-gray-800 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-4 transition-colors duration-200;
}

.quick-capture:focus-within {
  @apply border-blue-500 bg-blue-50 dark:bg-blue-950;
}

.status-badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-todo {
  @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
}

.status-done {
  @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}

.status-backlog {
  @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
}