@import "tailwindcss";

@theme {
  --color-navy-50: #f0f4f9;
  --color-navy-100: #d9e2ec;
  --color-navy-200: #b3c5d8;
  --color-navy-300: #7d9bb8;
  --color-navy-400: #4f7596;
  --color-navy-500: #2d5478;
  --color-navy-600: #1f3f5f;
  --color-navy-700: #162e47;
  --color-navy-800: #0f2238;
  --color-navy-900: #0a172a;
  --color-navy-950: #050d1a;

  --color-accent-400: #60a5fa;
  --color-accent-500: #3b82f6;
  --color-accent-600: #2563eb;
}

@layer base {
  body {
    @apply bg-navy-950 text-navy-50 antialiased min-h-screen;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-md bg-accent-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-accent-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-400 focus-visible:ring-offset-2 focus-visible:ring-offset-navy-950 disabled:opacity-50;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-md border border-navy-600 bg-navy-800 px-4 py-2.5 text-sm font-semibold text-navy-100 shadow-sm transition hover:bg-navy-700 hover:border-navy-500;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-navy-200 transition hover:text-white hover:bg-navy-800/60;
  }

  .form-field {
    @apply mb-5;
  }

  .form-label {
    @apply block text-sm font-medium text-navy-200 mb-1.5;
  }

  .form-input {
    @apply block w-full rounded-md border border-navy-700 bg-navy-900 px-3.5 py-2.5 text-navy-50 placeholder:text-navy-400 shadow-sm transition focus:border-accent-500 focus:ring-2 focus:ring-accent-500/30 focus:outline-none;
  }

  .form-input.is-invalid {
    @apply border-red-500/70 focus:border-red-500 focus:ring-red-500/30;
  }

  .form-error {
    @apply mt-1.5 text-xs text-red-400;
  }

  .form-hint {
    @apply mt-1.5 text-xs text-navy-400;
  }

  .auth-card {
    @apply w-full max-w-md rounded-2xl border border-navy-700/60 bg-navy-900/80 p-6 sm:p-8 shadow-2xl shadow-navy-950/50 backdrop-blur;
  }

  .auth-title {
    @apply text-2xl font-bold text-white tracking-tight;
  }

  .auth-subtitle {
    @apply mt-1.5 text-sm text-navy-300;
  }

  .auth-link {
    @apply font-medium text-accent-400 hover:text-accent-500 transition;
  }

  .flash-notice {
    @apply rounded-md border border-accent-500/40 bg-accent-500/10 px-4 py-3 text-sm text-accent-400;
  }

  .flash-alert {
    @apply rounded-md border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-300;
  }
}