/* ==========================================================================
   Kanailal Raha Seva Sadan - Smart Medical Royal Blue Theme
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Color Palette - Vibrant Medical Royal Blue Palette */
  --primary-color: #1865c9;        /* Royal Medical Blue (#1865c9) */
  --primary-dark: #0b3b74;         /* Deep Navy Blue (#0b3b74) */
  
  --topbar-green: #0b3b74;         /* Dark Navy Blue Top Bar */
  --topbar-blue: #0b3b74;
  --logo-green: #1865c9;           /* Royal Medical Blue */
  --logo-green-hover: #1254a6;
  
  --logo-orange: #f58220;          /* Logo Caring Hand Orange */
  --logo-orange-hover: #dc6f13;
  --accent-orange: #f58220;
  
  --emergency-red: #e31b23;        /* Logo Medical Red Cross */
  --emergency-hover: #c41219;
  
  --accent-light: #edf5fd;         /* Soft Blue Hover BG */

  /* Neutral Colors */
  --bg-light: #f8fafc;             /* Light Page Background */
  --bg-white: #ffffff;             /* Pure White Card */
  --bg-subtle: #f1f5f9;            /* Section Background */
  --border-color: #e2e8f0;         /* Border Color */

  /* Typography Colors */
  --text-dark: #0f172a;            /* Headings & Nav Links */
  --text-body: #334155;            /* Body Text */
  --text-muted: #64748b;           /* Muted Text */
  --text-light: #ffffff;

  /* Typography Fonts - Modern Clean Hospital Brand Font */
  --font-main: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-nav: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  
  /* Shadows & Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 1px 3px rgba(11, 59, 116, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 59, 116, 0.08);
  --shadow-lg: 0 10px 25px rgba(11, 59, 116, 0.12);

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-normal: 0.28s ease;
  --z-header: 1000;
  --z-modal: 2000;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-light);
  color: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: all var(--transition-fast);
}

a:hover {
  color: var(--logo-green);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}