/* ============================================================
   SHALOM CARE MUMBAI - Design Tokens & CSS Variables
   World-Class Premium Healthcare Design System
   ============================================================ */

:root {
  /* ---- Brand Colors ---- */
  --navy: #1E3A8A;
  --navy-dark: #152d6b;
  --navy-deeper: #0f2050;
  --navy-light: #2d4fa0;
  --navy-muted: #1E3A8A20;
  --navy-glass: rgba(30, 58, 138, 0.08);

  --gold: #D4A017;
  --gold-light: #e8b832;
  --gold-dark: #b8880f;
  --gold-pale: #fdf3d7;
  --gold-muted: rgba(212, 160, 23, 0.15);

  --white: #FFFFFF;
  --bg-light: #F8FAFC;
  --bg-section: #F0F4FF;
  --bg-warm: #FFFBF2;

  /* ---- Neutrals ---- */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* ---- Semantic Colors ---- */
  --success: #059669;
  --success-bg: #D1FAE5;
  --warning: #D97706;
  --warning-bg: #FEF3C7;
  --error: #DC2626;
  --error-bg: #FEE2E2;
  --info: #2563EB;
  --info-bg: #DBEAFE;

  /* ---- WhatsApp ---- */
  --wa-green: #25D366;
  --wa-dark: #128C7E;
  --wa-glow: rgba(37, 211, 102, 0.4);

  /* ---- Typography ---- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hindi: 'Noto Sans Devanagari', sans-serif;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  --text-7xl: 4.5rem;     /* 72px */

  /* ---- Spacing ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Border Radius ---- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(30,58,138,0.06);
  --shadow-md: 0 4px 16px rgba(30,58,138,0.10);
  --shadow-lg: 0 8px 32px rgba(30,58,138,0.14);
  --shadow-xl: 0 16px 48px rgba(30,58,138,0.18);
  --shadow-2xl: 0 24px 64px rgba(30,58,138,0.22);
  --shadow-gold: 0 8px 32px rgba(212,160,23,0.25);
  --shadow-card: 0 4px 24px rgba(30,58,138,0.08);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: 1.5rem;
  --header-height: 80px;
  --emergency-height: 42px;

  /* ---- Glassmorphism ---- */
  --glass-bg: rgba(255,255,255,0.85);
  --glass-border: rgba(255,255,255,0.4);
  --glass-blur: blur(16px);
  --glass-navy: rgba(30,58,138,0.75);

  /* ---- Z-index Scale ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Dark mode prep */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-light: #0f172a;
    --bg-section: #1a2744;
    --white: #1E293B;
    --gray-100: #1E293B;
  }
}

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