:root {
  /* --------------------------------
     1. Brand & Theme Colors (Medical/Clean)
     -------------------------------- */
  --primary-color: #0ea5e9;       /* Sky 500 */
  --primary-dark: #0284c7;        /* Sky 600 */
  --primary-light: #e0f2fe;       /* Sky 100 */
  
  --secondary-color: #64748b;     /* Slate 500 */
  
  --success-color: #10b981;       /* Emerald 500 */
  --warning-color: #f59e0b;       /* Amber 500 */
  --danger-color: #ef4444;        /* Red 500 */
  
  /* --------------------------------
     2. Sidebar Theme (Deep Slate/Navy)
     -------------------------------- */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 70px;
  --sidebar-bg: #1e293b;          /* Slate 800 */
  --sidebar-bg-dark: #0f172a;     /* Slate 900 */
  
  --sidebar-text: #94a3b8;        /* Slate 400 */
  --sidebar-text-hover: #f1f5f9;  /* Slate 100 */
  
  --sidebar-item-bg-hover: rgba(255, 255, 255, 0.05);
  --sidebar-item-bg-active: var(--primary-color);
  --sidebar-item-text-active: #ffffff;
  
  --sidebar-border-color: rgba(255, 255, 255, 0.05);

  /* --------------------------------
     3. Navbar Theme (Glass/Light)
     -------------------------------- */
  --navbar-height: 70px;
  --navbar-bg: rgba(255, 255, 255, 0.85); /* Glass effect base */
  --navbar-backdrop-blur: 10px;
  
  --navbar-text: #334155;         /* Slate 700 */
  --navbar-border-color: #e2e8f0; /* Slate 200 */
  
  --navbar-icon-color: #64748b;   /* Slate 500 */
  --navbar-icon-hover: #0f172a;   /* Slate 900 */

  /* --------------------------------
     4. Layout & Spacing
     -------------------------------- */
  --z-navbar: 1040;
  --z-sidebar-overlay: 1045;
  --z-sidebar: 1050;
  
  --border-radius-sm: 0.375rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-pill: 9999px;
  
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
}

/* Dark Mode Overrides (if body has .dark-mode or similar) */
body.dark-mode {
  --navbar-bg: rgba(30, 41, 59, 0.85);
  --navbar-text: #f1f5f9;
  --navbar-border-color: rgba(255, 255, 255, 0.1);
  --navbar-icon-color: #94a3b8;
  --navbar-icon-hover: #ffffff;
}