/* ============================================================
   Clinic UI — canonical design tokens (web + native reference)
   Shell aligned with MediClinic interactive demo (public/clinic-demo.html):
   teal sidebar, Inter, slate text, soft card shadows.
   Import in admin (@see clinic-theme.css), marketing pages, and
   use public/design-tokens.json for iOS/Android/React Native.
   ============================================================ */
:root {
  --primary:        #2563EB;
  --primary-dark:   #1D4ED8;
  --primary-light:  #DBEAFE;
  --primary-subtle: #EFF6FF;
  --accent:         #0891B2;
  --success:        #059669;
  --success-light:  #D1FAE5;
  --warning:        #D97706;
  --warning-light:  #FEF3C7;
  --danger:         #DC2626;
  --danger-light:   #FEE2E2;
  --info:           #0284C7;
  --info-light:     #E0F2FE;
  --purple:         #7C3AED;
  --purple-light:   #EDE9FE;

  /* Demo sidebar “teal” (not slate) */
  --sidebar-bg:     #0F4C5C;
  --sidebar-hover:  #1A6275;
  --sidebar-active: #2563EB;
  --sidebar-text:   rgba(255, 255, 255, 0.62);
  --sidebar-text-active: #FFFFFF;
  --sidebar-width:  240px;

  --body-bg:        #F1F5F9;
  --card-bg:        #FFFFFF;
  --border:         #E2E8F0;
  --border-light:   #F1F5F9;
  --input-tint-bg:  #FAFBFF;

  --text-primary:   #1E293B;
  --text-secondary: #64748B;
  --text-muted:     #94A3B8;
  --brand-dot:      #FD6B3D;
  --mskster-paper:  #E3DCCF;
  --mskster-ink:    #222327;
  --mskster-ster:   #6A788D;

  /* Radii — dashboard tiles use --radius-xl (soft card look) */
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  /* Soft floating-card shadows */
  --shadow-sm:  0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow:     0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.10);
  --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.06);

  --shadow-auth-card: 0 10px 40px rgba(0,0,0,.10);

  --font-sans-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}