@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');

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

:root {
  /* Primary Colors */
  --color-primary: #2563EB; /* blue-600 - Medical trust blue */
  --color-primary-50: #EFF6FF; /* blue-50 */
  --color-primary-100: #DBEAFE; /* blue-100 */
  --color-primary-200: #BFDBFE; /* blue-200 */
  --color-primary-300: #93C5FD; /* blue-300 */
  --color-primary-400: #60A5FA; /* blue-400 */
  --color-primary-500: #3B82F6; /* blue-500 */
  --color-primary-600: #2563EB; /* blue-600 */
  --color-primary-700: #1D4ED8; /* blue-700 */
  --color-primary-800: #1E40AF; /* blue-800 */
  --color-primary-900: #1E3A8A; /* blue-900 */

  /* Secondary Colors */
  --color-secondary: #059669; /* emerald-600 - Health-positive green */
  --color-secondary-50: #ECFDF5; /* emerald-50 */
  --color-secondary-100: #D1FAE5; /* emerald-100 */
  --color-secondary-200: #A7F3D0; /* emerald-200 */
  --color-secondary-300: #6EE7B7; /* emerald-300 */
  --color-secondary-400: #34D399; /* emerald-400 */
  --color-secondary-500: #10B981; /* emerald-500 */
  --color-secondary-600: #059669; /* emerald-600 */
  --color-secondary-700: #047857; /* emerald-700 */
  --color-secondary-800: #065F46; /* emerald-800 */
  --color-secondary-900: #064E3B; /* emerald-900 */

  /* Accent Colors */
  --color-accent: #DC2626; /* red-600 - Clinical alert red */
  --color-accent-50: #FEF2F2; /* red-50 */
  --color-accent-100: #FEE2E2; /* red-100 */
  --color-accent-200: #FECACA; /* red-200 */
  --color-accent-300: #FCA5A5; /* red-300 */
  --color-accent-400: #F87171; /* red-400 */
  --color-accent-500: #EF4444; /* red-500 */
  --color-accent-600: #DC2626; /* red-600 */
  --color-accent-700: #B91C1C; /* red-700 */
  --color-accent-800: #991B1B; /* red-800 */
  --color-accent-900: #7F1D1D; /* red-900 */

  /* Background Colors */
  --color-background: #FAFBFC; /* slate-50 - Soft neutral background */
  --color-surface: #FFFFFF; /* white - Pure white surface */

  /* Text Colors */
  --color-text-primary: #1F2937; /* gray-800 - Deep charcoal */
  --color-text-secondary: #6B7280; /* gray-500 - Balanced gray */

  /* Status Colors */
  --color-success: #10B981; /* emerald-500 - Positive health green */
  --color-warning: #F59E0B; /* amber-500 - Medical caution amber */
  --color-error: #EF4444; /* red-500 - Alert red */

  /* Border Colors */
  --color-border: #E5E7EB; /* gray-200 - Minimal border */
  --color-border-light: #F3F4F6; /* gray-100 */

  /* Shadow Values */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Animation Timing */
  --transition-fast: 200ms ease-out;
  --transition-normal: 300ms ease-out;
}

/* Base Styles */
@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-text-primary font-body;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }

  /* Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* Component Styles */
@layer components {
  .medical-card {
    @apply bg-surface rounded-md shadow-sm border border-border p-6;
    transition: var(--transition-normal);
  }

  .medical-card:hover {
    @apply shadow-md;
  }

  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded-md font-medium;
    @apply hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
    transition: var(--transition-fast);
  }

  .btn-secondary {
    @apply bg-secondary text-white px-4 py-2 rounded-md font-medium;
    @apply hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:ring-offset-2;
    transition: var(--transition-fast);
  }

  .input-field {
    @apply w-full px-3 py-2 border border-border rounded-md bg-surface;
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500;
    transition: var(--transition-fast);
  }

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

  .status-success {
    @apply bg-success/10 text-success;
  }

  .status-warning {
    @apply bg-warning/10 text-warning;
  }

  .status-error {
    @apply bg-error/10 text-error;
  }

  .loading-skeleton {
    @apply animate-pulse bg-gray-200 rounded;
  }
}

/* Utility Classes */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .transition-medical {
    transition: var(--transition-normal);
  }

  .transition-medical-fast {
    transition: var(--transition-fast);
  }

  .shadow-medical-sm {
    box-shadow: var(--shadow-sm);
  }

  .shadow-medical-md {
    box-shadow: var(--shadow-md);
  }

  .shadow-medical-lg {
    box-shadow: var(--shadow-lg);
  }
}