`src/app/globals.css`

81 lines
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --border: 214 32% 91%;
    --ring: 35 78% 50%;
    --primary: 35 78% 50%;
    --primary-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --success: 142 76% 36%;
    --warning: 38 92% 50%;
  }

  .dark {
    --background: 222 47% 6%;
    --foreground: 210 40% 98%;
    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;
    --border: 217 33% 17%;
    --ring: 35 78% 50%;
    --primary: 35 78% 50%;
    --primary-foreground: 0 0% 100%;
    --destructive: 0 63% 31%;
    --success: 142 76% 36%;
    --warning: 38 92% 50%;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer components {
  .card {
    @apply rounded-lg border bg-white p-6 shadow-sm dark:bg-navy-900;
  }
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-md bg-omega-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-omega-600 focus:outline-none focus:ring-2 focus:ring-omega-400 focus:ring-offset-2 disabled:opacity-50;
  }
  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-omega-400 focus:ring-offset-2 disabled:opacity-50 dark:border-navy-600 dark:bg-navy-800 dark:text-gray-200 dark:hover:bg-navy-700;
  }
  .input {
    @apply block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-omega-500 focus:outline-none focus:ring-1 focus:ring-omega-500 dark:border-navy-600 dark:bg-navy-800 dark:text-gray-100;
  }
  .badge {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
  }
  .badge-success {
    @apply badge bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
  }
  .badge-warning {
    @apply badge bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
  }
  .badge-error {
    @apply badge bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
  }
  .badge-info {
    @apply badge bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); }