/* ============================================================
   variables.css — CSS Custom Properties
   Singheswar Hospital Website
   Color scheme inspired by drganeshkumar.gharwellness.com
   ============================================================ */

:root {
  /* ── Blue Palette (Light Theme) ── */
  --color-primary:     #0369a1;   /* deep sky blue — main brand */
  --color-secondary:   #0284c7;   /* medium blue */
  --color-accent:      #0891b2;   /* cyan-blue accent */
  --color-light-blue:  #7dd3fc;   /* light sky */
  --color-pale-blue:   #bae6fd;   /* very light blue */

  /* ── Utility Colors ── */
  --color-white:       #ffffff;
  --color-whatsapp:    #25D366;
  --color-success:     #047857;
  --color-warning:     #b45309;
  --color-error:       #dc2626;

  /* ── Light Mode Surfaces ── */
  --bg-primary:        #ffffff;
  --bg-secondary:      #f0f9ff;
  --text-primary:      #0c4a6e;
  --text-secondary:    #475569;
  --color-border:      #cbd5e1;

  /* ── Gradients ── */
  --gradient-primary:  linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
  --gradient-hero:     linear-gradient(120deg, #0D92F4 0%, #0369a1 100%);
  --gradient-card:     linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
  --gradient-button:   linear-gradient(135deg, #0369a1 0%, #0284c7 100%);

  /* ── Navbar height (used for page offset) ── */
  --navbar-height: 76px;

  /* ── Spacing Scale ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* ── Border Radius ── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px 0 rgba(3, 105, 161, 0.1), 0 1px 2px 0 rgba(3, 105, 161, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(3, 105, 161, 0.15), 0 2px 4px -1px rgba(3, 105, 161, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(3, 105, 161, 0.2), 0 10px 10px -5px rgba(3, 105, 161, 0.1);
}