@import "tailwindcss";

/* ==========================================================================
   Affirmeo Design System
   Colors derived from affirmeo-gov-verify brand guidelines
   Primary: Professional blue hsl(210, 100%, 45%) - #0073E6
   Accent: Trust cyan hsl(195, 100%, 50%) - #00BFFF
   ========================================================================== */

@theme {
  /* Affirmeo Brand Colors */
  --color-affirmeo-50: hsl(210 100% 97%);
  --color-affirmeo-100: hsl(210 100% 94%);
  --color-affirmeo-200: hsl(210 100% 85%);
  --color-affirmeo-300: hsl(210 100% 70%);
  --color-affirmeo-400: hsl(210 100% 55%);
  --color-affirmeo-500: hsl(210 100% 45%);
  --color-affirmeo-600: hsl(210 100% 40%);
  --color-affirmeo-700: hsl(210 100% 35%);
  --color-affirmeo-800: hsl(210 100% 28%);
  --color-affirmeo-900: hsl(210 100% 20%);
  
  /* Accent Colors (Cyan) */
  --color-accent-400: hsl(195 100% 55%);
  --color-accent-500: hsl(195 100% 50%);
  --color-accent-600: hsl(195 100% 42%);
}

@layer components {
  /* --------------------------------------------------------------------------
     Form Inputs - Consistent styling for all form fields
     -------------------------------------------------------------------------- */
  
  .form-input,
  .form-select,
  .form-textarea {
    @apply block w-full rounded-md border border-gray-300 
           bg-white px-4 py-3 text-base text-gray-900
           shadow-sm placeholder:text-gray-400
           focus:border-affirmeo-500 focus:outline-none focus:ring-2 focus:ring-affirmeo-500/20;
  }

  .form-input:disabled,
  .form-select:disabled,
  .form-textarea:disabled {
    @apply bg-gray-50 text-gray-500 cursor-not-allowed;
  }

  .form-checkbox {
    @apply h-4 w-4 rounded border-gray-300 text-affirmeo-600 
           focus:ring-affirmeo-500 focus:ring-offset-0;
  }

  .form-radio {
    @apply h-4 w-4 border-gray-300 text-affirmeo-600 
           focus:ring-affirmeo-500 focus:ring-offset-0;
  }

  /* --------------------------------------------------------------------------
     Form Labels
     -------------------------------------------------------------------------- */

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

  .form-label-inline {
    @apply text-sm text-gray-700;
  }

  .form-hint {
    @apply mt-1 text-xs text-gray-500;
  }

  .form-error {
    @apply mt-1 text-xs text-red-600;
  }

  /* --------------------------------------------------------------------------
     Buttons
     -------------------------------------------------------------------------- */

  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-md px-4 py-2.5
           text-sm font-semibold shadow-sm transition-colors cursor-pointer
           bg-affirmeo-500 text-white 
           hover:bg-affirmeo-600 
           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-affirmeo-500
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-md px-4 py-2.5
           text-sm font-semibold shadow-sm transition-colors cursor-pointer
           bg-white text-gray-700 border border-gray-300
           hover:bg-gray-50 
           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-affirmeo-500
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-danger {
    @apply inline-flex items-center justify-center gap-2 rounded-md px-4 py-2.5
           text-sm font-semibold shadow-sm transition-colors cursor-pointer
           bg-red-600 text-white 
           hover:bg-red-700 
           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-link {
    @apply text-affirmeo-600 hover:text-affirmeo-700 font-medium 
           bg-transparent border-0 cursor-pointer p-0;
  }

  /* --------------------------------------------------------------------------
     Cards & Containers
     -------------------------------------------------------------------------- */

  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200;
  }

  .card-body {
    @apply p-6;
  }

  .card-header {
    @apply px-6 py-4 border-b border-gray-200;
  }

  .card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
  }

  /* --------------------------------------------------------------------------
     Status Badges
     -------------------------------------------------------------------------- */

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

  .badge-success {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 
           text-xs font-medium bg-green-100 text-green-800;
  }

  .badge-warning {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 
           text-xs font-medium bg-yellow-100 text-yellow-800;
  }

  .badge-danger {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 
           text-xs font-medium bg-red-100 text-red-800;
  }

  .badge-info {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 
           text-xs font-medium bg-affirmeo-100 text-affirmeo-800;
  }

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

  /* --------------------------------------------------------------------------
     Alerts & Notices
     -------------------------------------------------------------------------- */

  .alert-success {
    @apply rounded-md p-4 text-sm bg-green-50 text-green-800 border border-green-200;
  }

  .alert-error {
    @apply rounded-md p-4 text-sm bg-red-50 text-red-800 border border-red-200;
  }

  .alert-warning {
    @apply rounded-md p-4 text-sm bg-yellow-50 text-yellow-800 border border-yellow-200;
  }

  .alert-info {
    @apply rounded-md p-4 text-sm bg-affirmeo-50 text-affirmeo-800 border border-affirmeo-200;
  }

  /* --------------------------------------------------------------------------
     Tables
     -------------------------------------------------------------------------- */

  .table {
    @apply min-w-full divide-y divide-gray-200;
  }

  .table th {
    @apply px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
  }

  .table td {
    @apply px-4 py-4 text-sm text-gray-900;
  }

  .table tbody tr {
    @apply border-b border-gray-100 hover:bg-gray-50;
  }

  /* --------------------------------------------------------------------------
     Links
     -------------------------------------------------------------------------- */

  .link {
    @apply text-affirmeo-600 hover:text-affirmeo-700 font-medium;
  }

  .link-muted {
    @apply text-gray-500 hover:text-gray-700;
  }

  /* --------------------------------------------------------------------------
     App Header
     -------------------------------------------------------------------------- */

  .app-header {
    @apply bg-affirmeo-600;
  }

  .app-header-gradient {
    background: linear-gradient(135deg, hsl(210 100% 45%), hsl(195 100% 50%));
  }
}