@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&display=swap');

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

:root {
  --vc-navy: #08254A;
  --vc-primary: #155EEF;
  --vc-primary-hover: #0B4FD6;
  --vc-soft-blue: #EEF4FF;
  --vc-bg: #F7F9FC;
  --vc-surface: #FFFFFF;
  --vc-text-strong: #101828;
  --vc-text: #344054;
  --vc-text-secondary: #667085;
  --vc-text-disabled: #98A2B3;
  --vc-border: #E4E7EC;
  --vc-border-strong: #D0D5DD;
  --vc-success: #079455;
  --vc-success-bg: #ECFDF3;
  --vc-warning: #DC6803;
  --vc-warning-bg: #FFFAEB;
  --vc-error: #D92D20;
  --vc-error-bg: #FEF3F2;
  --vc-critical: #B42318;
  --vc-critical-bg: #FEE4E2;
  --vc-radius-input: 8px;
  --vc-radius-card: 10px;
}

@layer base {
  body {
    @apply font-sans text-ink bg-canvas;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary-600 text-white px-4 py-2 rounded-input
           hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed
           transition-colors;
  }
  .btn-secondary {
    @apply bg-surface text-primary-700 border border-primary-300 px-4 py-2 rounded-input
           hover:bg-primary-50 disabled:opacity-50 disabled:cursor-not-allowed
           transition-colors;
  }
  .btn-danger {
    @apply bg-clinical-danger text-white px-4 py-2 rounded-input
           hover:bg-clinical-critical disabled:opacity-50 disabled:cursor-not-allowed
           transition-colors;
  }
  .form-input {
    @apply block w-full rounded-input border border-line-strong px-4 py-2 text-ink
           focus:border-primary-500 focus:ring-2 focus:ring-primary-500
           disabled:bg-canvas disabled:text-ink-disabled;
  }
  .page-container {
    @apply p-4 sm:p-6 lg:p-8 max-w-4xl mx-auto;
  }
  .app-header {
    @apply flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between
           px-4 py-3 sm:px-6 h-auto min-h-16 bg-surface border-b border-line;
  }
  .app-header-title {
    @apply flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4 min-w-0;
  }
  .app-header-actions {
    @apply flex flex-wrap items-center gap-2 sm:gap-4;
  }
  .card {
    @apply bg-surface rounded-card border border-line p-4 sm:p-6 shadow-card;
  }
  .card-elevated {
    @apply bg-surface rounded-card border border-line p-4 sm:p-6 shadow-card;
  }
  .split-pane {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8
           h-auto lg:flex-1 lg:min-h-0 min-h-0;
  }
  .nav-link {
    @apply text-sm text-ink-secondary hover:text-ink-strong transition-colors;
  }
  .nav-link.router-link-active {
    @apply text-ink-strong font-medium;
  }
  .status-badge {
    @apply px-2 py-1 rounded-control text-xs font-medium;
  }
  .ocr-banner {
    @apply bg-primary-50 border border-primary-100 rounded-input p-3 text-sm text-primary-800;
  }
  .ocr-high {
    @apply border-l-[3px] border-l-clinical-safe;
  }
  .ocr-medium {
    @apply border-l-[3px] border-l-clinical-warning;
  }
  .ocr-low {
    @apply border-l-[3px] border-l-clinical-danger;
  }
  .ocr-confidence-badge {
    @apply inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold tracking-wide uppercase leading-none;
  }
  .ocr-badge-high {
    @apply bg-clinical-safe-bg text-clinical-safe;
  }
  .ocr-badge-medium {
    @apply bg-clinical-warning-bg text-clinical-warning;
  }
  .ocr-badge-low {
    @apply bg-clinical-danger-bg text-clinical-danger;
  }
}
