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

body, html { font-family: 'Roboto', system-ui, sans-serif !important; }

/* Light mode — Wellpro light blue background, white cards */
:root {
  --background: 220 35% 95%;
  --foreground: 221 54% 12%;
  --card: 0 0% 100%;
  --card-foreground: 221 54% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 221 54% 12%;
  --primary: 221 54% 29%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 25% 90%;
  --secondary-foreground: 221 54% 20%;
  --muted: 220 25% 92%;
  --muted-foreground: 220 20% 46%;
  --accent: 220 35% 88%;
  --accent-foreground: 221 54% 20%;
  --destructive: 0 92% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 20% 86%;
  --input: 220 20% 86%;
  --ring: 221 54% 38%;
}

/* Dark mode — Wellpro deep navy */
:root.dark {
  --background: 218 54% 10%;
  --foreground: 210 40% 95%;
  --card: 215 50% 14%;
  --card-foreground: 210 40% 95%;
  --popover: 215 50% 14%;
  --popover-foreground: 210 40% 95%;
  --primary: 210 40% 95%;
  --primary-foreground: 221 54% 15%;
  --secondary: 220 45% 18%;
  --secondary-foreground: 210 40% 95%;
  --muted: 220 45% 18%;
  --muted-foreground: 215 20% 65%;
  --accent: 220 45% 20%;
  --accent-foreground: 210 40% 95%;
  --destructive: 0 72% 45%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 40% 20%;
  --input: 220 40% 20%;
  --ring: 221 54% 55%;
}

/* Header: always white so logo is crisp in both modes */
header {
  background-color: #ffffff !important;
  border-bottom: 2px solid #223B72 !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 6px rgba(34, 59, 114, 0.10) !important;
}
header h1 { color: #223B72 !important; }
header .text-muted-foreground { color: #5b7ab0 !important; }
header nav a { color: #223B72 !important; }
header nav a:hover { background-color: #e8edf7 !important; color: #1B3060 !important; }

/* Healthy — Wellpro green */
.bg-green-400 { background-color: #34d399 !important; }
.bg-green-500 { background-color: #10B981 !important; }
.bg-green-600 { background-color: #059669 !important; }
.bg-green-700 { background-color: #047857 !important; }
.text-green-500 { color: #10B981 !important; }
.text-green-600 { color: #059669 !important; }
.text-green-700 { color: #047857 !important; }
.bg-success { background-color: #10B981 !important; }

/* Unhealthy — Wellpro red */
.bg-red-400 { background-color: #f87171 !important; }
.bg-red-500 { background-color: #F63030 !important; }
.bg-red-600 { background-color: #dc2626 !important; }
.text-red-500 { color: #F63030 !important; }
.text-red-600 { color: #dc2626 !important; }