/* ==========================================================
   HEALTH WORLD PATHOLOGY — Design Tokens
   Razorpay Dashboard Design Language
   ========================================================== */

:root {
  /* ── Razorpay Topbar (Dark Executive Slate) ── */
  --rp-topbar-bg:            #0b0f19;
  --rp-topbar-border:        rgba(255, 255, 255, 0.08);
  --rp-topbar-text:          #e2e8f0;
  --rp-topbar-muted:         #94a3b8;
  --rp-topbar-tab-hover:     rgba(255, 255, 255, 0.08);
  --rp-topbar-tab-active:    rgba(255, 255, 255, 0.16);
  --rp-topbar-search-bg:     rgba(255, 255, 255, 0.07);
  --rp-topbar-search-border: rgba(255, 255, 255, 0.12);
  --rp-topbar-search-text:   #ffffff;

  /* ── Razorpay Primary Blue / Brand Accents ── */
  --color-primary-50:  #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #0c66e4;
  --color-primary-600: #0052cc;
  --color-primary-700: #0747a6;
  --color-primary-800: #003882;
  --color-primary-900: #091e42;

  /* ── Neutral / Hospital Slate ── */
  --color-neutral-50:  #f8f9fa;
  --color-neutral-100: #f1f3f6;
  --color-neutral-200: #e4e7eb;
  --color-neutral-300: #cbd2d9;
  --color-neutral-400: #9aa5b1;
  --color-neutral-500: #616e7c;
  --color-neutral-600: #485460;
  --color-neutral-700: #323f4b;
  --color-neutral-800: #1f2933;
  --color-neutral-900: #0b0f19;

  /* ── Success / Up Trend (Emerald Green) ── */
  --color-success-50:  #ecfdf5;
  --color-success-100: #d1fae5;
  --color-success-200: #a7f3d0;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #047857;

  /* ── Warning / Amber ── */
  --color-warning-50:  #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;

  /* ── Danger / Down Trend (Crimson Red) ── */
  --color-danger-50:  #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-200: #fecaca;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;

  /* ── Info / Blue ── */
  --color-info-50:  #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-200: #bfdbfe;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;

  /* ── Purple (for special badges/tags) ── */
  --color-purple-50:  #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-500: #8b5cf6;
  --color-purple-600: #7c3aed;

  /* ════════════════════════════════════════
     Semantic Tokens (Razorpay Light Canvas)
     ════════════════════════════════════════ */

  /* Backgrounds */
  --bg-app:         #f4f6f8;  /* Clean Razorpay off-white */
  --bg-surface:     #ffffff;  /* Pure white cards */
  --bg-surface-alt: #f8fafc;
  --bg-sidebar:     #0E172A;  /* Slate-900 executive sidebar */
  --bg-topbar:      var(--rp-topbar-bg);
  --bg-hover:       #f4f6f8;
  --bg-active:      #eef2f6;  /* Soft active grey/blue */
  --bg-input:       #ffffff;
  --bg-modal:       #ffffff;
  --bg-toast:       #ffffff;
  --bg-skeleton:    #e4e7eb;

  /* Text */
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #8291a5;
  --text-inverse:   #ffffff;
  --text-link:      #0c66e4;
  --text-sidebar:   #475569;
  --text-sidebar-active: #0f172a;

  /* Borders */
  --border-color:   #eaedf2;  /* Signature Razorpay light card border */
  --border-light:   #f1f3f6;
  --border-focus:   #0c66e4;

  /* ── Typography ── */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --text-xs:   0.6875rem; /* 11px */
  --text-sm:   0.78125rem;/* 12.5px */
  --text-base: 0.875rem;  /* 14px */
  --text-md:   0.9375rem; /* 15px */
  --text-lg:   1.0625rem; /* 17px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.75rem;   /* 28px */
  --text-4xl:  2.125rem;  /* 34px */

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:  1.2;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

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

  /* ── Border Radius (Signature Razorpay Rounded Cards) ── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ── Shadows (Refined Crisp Elevation) ── */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -1px rgba(15, 23, 42, 0.03);
  --shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, 0.07), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
  --shadow-xl:  0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 10px 10px -5px rgba(15, 23, 42, 0.03);

  /* ── Transitions ── */
  --transition-fast:   120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;
  --transition-theme:  250ms ease;

  /* ── Z-index Scale ── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ── Layout Dimensions ── */
  --topbar-height:     56px;
  --sidebar-width:     240px;
  --sidebar-collapsed: 60px;
  --content-max-width: 1400px;
}

/* ════════════════════════════════════════
   DARK THEME (Executive Midnight Mode)
   ════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-app:         #0a0e17;
  --bg-surface:     #111726;
  --bg-surface-alt: #161e31;
  --bg-sidebar:     #0E172A;
  --bg-topbar:      #070a10;
  --bg-hover:       #1a233a;
  --bg-active:      #1e2942;
  --bg-input:       #161e31;
  --bg-modal:       #111726;
  --bg-toast:       #161e31;
  --bg-skeleton:    #1e2942;

  --text-primary:   #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-inverse:   #0f172a;
  --text-link:      #38bdf8;
  --text-sidebar:   #94a3b8;
  --text-sidebar-active: #ffffff;

  --border-color:   #1f293d;
  --border-light:   #192233;
  --border-focus:   #38bdf8;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.4), 0 8px 10px -6px rgba(0,0,0,0.3);
}