baas-demo-image-upload/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Light theme (default) */
  :root {
    --bg-primary: #f9fafb;    /* gray-50 */
    --bg-secondary: #ffffff;   /* white */
    --bg-tertiary: #f3f4f6;   /* gray-100 */
    --text-primary: #111827;   /* gray-900 */
    --text-secondary: #4b5563; /* gray-600 */
    --text-muted: #6b7280;     /* gray-500 */
    --border: #e5e7eb;         /* gray-200 */
    --border-strong: #d1d5db;  /* gray-300 */

    /* Accent colors - Blue for light theme */
    --accent-50: #eff6ff;
    --accent-100: #dbeafe;
    --accent-200: #bfdbfe;
    --accent-500: #3b82f6;
    --accent-600: #2563eb;
    --accent-700: #1d4ed8;
    --accent-800: #1e40af;
  }

  /* Dark theme */
  .dark {
    --bg-primary: #111827;    /* gray-900 */
    --bg-secondary: #1f2937;  /* gray-800 */
    --bg-tertiary: #374151;   /* gray-700 */
    --text-primary: #f9fafb;  /* gray-50 */
    --text-secondary: #d1d5db;/* gray-300 */
    --text-muted: #9ca3af;    /* gray-400 */
    --border: #374151;        /* gray-700 */
    --border-strong: #4b5563; /* gray-600 */

    /* Accent colors - Amber for dark theme */
    --accent-50: #fffbeb;
    --accent-100: #fef3c7;
    --accent-200: #fde68a;
    --accent-500: #f59e0b;
    --accent-600: #d97706;
    --accent-700: #b45309;
    --accent-800: #92400e;
  }

  body {
    @apply antialiased transition-colors duration-200;
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    background-color: var(--accent-600);
    @apply text-white focus:ring-offset-2;
  }
  .btn-primary:hover {
    background-color: var(--accent-700);
  }
  .btn-primary:focus {
    --tw-ring-color: var(--accent-500);
  }
  .dark .btn-primary {
    @apply focus:ring-offset-gray-900;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600;
  }

  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
  }

  .input {
    @apply w-full px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-colors duration-200;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
  }
  .input:focus {
    --tw-ring-color: var(--accent-500);
  }
  .input::placeholder {
    color: var(--text-muted);
  }

  .card {
    @apply rounded-xl shadow-sm transition-colors duration-200;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
  }
}